html css项目答辩（CSS是什么和HTML有什么区别）

本文目录

• CSS是什么和HTML有什么区别
• css如何加入到html
• CSS如何和HTML连接
• html和css学习总结
• html多个il定义不同css
• 花钱买的javaweb毕设项目怎么才能看懂到可以通过答辩的程度
• 用 html + css 写静态页面需要注意什么

CSS是什么和HTML有什么区别

一、css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

二、HTML和CSS的区别?

1、定义不同：

html是HyperTextMark-upLanguage的缩写，即超文本标记语言；

css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

2、用途不同：

html则是用于文本内容，包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

css是多用于样式，主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。

3、CSS语法与HTML语法完全不同：

HTML里代码是功能标签，如DIV、SPAN、A链接、em标签、I斜体标签、u下划线等，html代码语法范例：《div》内容《/div》

CSS样式代码语法是div{样式单词：值}

三、HTML和CSS联系：

CSS与HTML相同之处在于，两个共同作用让网页实现需要的布局样式。

扩展资料：

1、标记符《html》,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而《/html》,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

2、CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

百度百科-CSS

css如何加入到html

内联样式、嵌入样式。
1、内联样式：将CSS样式直接写在HTML元素的标签内部，使用style属性。
2、嵌入样式：将CSS样式写在HTML文件的

CSS如何和HTML连接

CSS和HTML连接起来的方法有使用内联样式、使用内部样式表、使用外部样式表、使用＠import引入外部样式表、继承样式、使用选择器等等。

1、使用内联样式

在HTML标签的内部使用style属性来添加CSS样式。例如：＜pstyle＝＂color:＃333；font-size:16px；＂＞这是一段使用内联样式的文本。

2、使用内部样式表

在HTML的head标签内部使用style标签来定义CSS样式。例如：＜style＞p{color:＃333；font-size:16px；}＜/style＞。

3、使用外部样式表

将CSS代码保存到一个独立的文件中，并在HTML中使用link标签引入外部样式表。例如：＜linkrel＝＂stylesheet＂type＝＂text/css＂href＝＂styles、css＂＞。

4、使用＠import引入外部样式表

在CSS文件中使用＠import语句引入其他CSS文件。例如：＠importurl（＂styles、css＂）。

5、继承样式

HTML元素可以继承父元素的样式。例如，将body的字体设置为Arial，那么p、h1等元素也会继承该样式。

6、使用选择器

CSS选择器可以根据元素名称、类名、id等进行选择，并将样式应用到相应的元素上。例如：p{color:＃333；font-size:16px；}。

html和css学习总结

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

 弹性容器内包含了一个或多个弹性子元素。

 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

    flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

  flex布局父项常见的属性：

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

                    属性值：row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐（如果主轴是x轴则水平居中）

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间（重要）

                3.flex-wrap:设置子元素是否换行

        属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

                    属性值： flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头，再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式（单行）

                    属性值： flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起（垂直居中）

                             stretch   拉伸（默认值） 使用时子盒子不要给高度

                    例如：子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间，用flex来表示占多少份数

                    flex:《number》; 默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序（前后顺序）

 给父元素添加 display:grid

      display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row;规定行属性

    grid-template-column;规定列属性

    1.绝对大小（根据列数或者行数确定值得个数）

       grid-template-row：200px 200px 200px

       grid-template-column：200px 200px 200px

    2.百分比（根据列数或者行数确定值得个数）

       grid-template-row：33.33% 33.33% 33.33%

       grid-template-column：33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%);

       grid-template-columns: repeat(3,33.3%);

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%);

        grid-template-columns: repeat(auto-fill,33.3%);

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px;

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px;

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px;

      grid-column-gap: 10px;

      复合写法

      grid-gap: 10px 10px;

    指定区域

     1.grid-template-areas: ’a b c ’

                                         ’d e f’

                                        ’g h i’;

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: ’a a c ’

                                         ’d e f’

                                         ’g h i’;

        .box div:nth-child(1){

            grid-area: a;

        }

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

html多个il定义不同css

HTML和CSS是两个独立的实体。
HTML定义了网页的结构和内容，而CSS则负责定义这些内容的样式和布局。HTML和CSS可以同时使用，并且可以通过内联样式（inlinestyles）或外部样式表（externalstylesheets）来定义样式。

花钱买的javaweb毕设项目怎么才能看懂到可以通过答辩的程度

作为一个从业10年的IT老鸟告诉你, 如果你的毕设是正儿八经工作过的人写的, 一般结构都是非常清晰, 采用mvc结构, 业务分层快准狠, 对业务高内聚低耦合, 对于这种代码, 只需要从内到外部一层一层看即可

• 理解毕设的目标, 然后看一下数据库设计, 数据库设计本质上跟你excel里的表差不多

• 查看dao层, 这个目前一般有两种, 一种是用orm的也就是hibernate, 另外一种是mybatis， 后面那种跟直接写sql没有本质区别, hibernate写的语句类似sql方言, 更方便理解

• 查看各种api的设计, 以及如何调用dao service数据服务, 然后返回哪一个jsp进行渲染

• 前端有的会有一些js代码, js是最简单的语言, 很容易学, 这样分层看你就能了解整个代码的运作原理了

如果是一些学生写的代码, 可能真的是胡写, 各种代码混乱不堪, 对于这种混沌代码, 没有什么比较好的方法

用 html + css 写静态页面需要注意什么

1. 结构清晰：HTML 和 CSS 的代码应该遵循良好的结构和语义，使得页面易于阅读和维护。
2. 响应式设计：随着移动设备的普及，网页需要在不同的设备上都能正常显示和使用。因此，你需要使用媒体查询来确保你的网页在不同屏幕尺寸下都能正确显示。
3. 可访问性：你的网页应该对所有用户都是可访问的，包括那些使用辅助技术的用户。这包括提供适当的文本替代品（alt 属性），以及确保颜色对比度足够高，以便于色盲或视力障碍的用户阅读。
4. 性能优化：尽管你不需要在一开始就考虑性能问题，但是你应该始终关注如何提高你的网页加载速度。这可能包括减少 HTTP 请求，优化图片大小，以及利用浏览器缓存。
5. 浏览器兼容性：不同的浏览器可能会对 HTML 和 CSS 的解析和渲染有所不同。因此，你需要测试你的网页在所有主要浏览器中的表现，并可能需要使用一些技巧来解决特定的兼容性问题。
6. 样式分离：尽可能将 CSS 与 HTML 分离，使得 HTML 只负责结构，而 CSS 负责样式。这样可以使代码更易于维护，同时也可以提高页面加载速度。
7. 使用语义化标签：使用语义化的 HTML 标签可以使你的网页更易于被搜索引擎理解和索引，同时也可以提高你的网页在不同设备上的可用性。
8. 避免使用内联样式：虽然内联样式可以让你直接在 HTML 元素中设置样式，但是它会增加代码的复杂性，并且可能导致样式冲突。因此，你应该尽可能避免使用内联样式，而是使用外部样式表或者内部样式。