html_css做什么？ 其实不管是前端工程师还是后台工程师我 们要做的工作无非就是软件的开发。
软件主要分为两种：C/S架构，B/S架构 B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上。
软件的开发流程： 根据W3C的标准，一个网页可以分为三部分：结构、表现、行为，
结构：HTML用于描述页面的结构 表现：CSS用于控制页面中的元素的样式 行为：JavaScript用于响应用户操作万维网联盟（W3C）
万维网联盟World Wide Web Consortium。 W3C专门为了定义网页相关的标准而成立。 W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准
HTML（Hypertext Markup Language） 超文本标记语言。 它负责网页的三个要素之中的结构。 HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
标签：html 中标记指的是标签 HTML使用标记标签来描述网页
结构：
<标签名>标签内容</标签名> <标签名 />元素
我们还将一个完整的标签称为元素。 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1> 上边的h1我们就称为元素 <p>我是一个<em>段落</em></p> p也是一个元素，em是p的子元素，p是 em的父元素 <body> <p><em>内容</em></p> </body> • body也是一个元素。 • body是p和em的祖先元素。 • p和em是body的后代元素属性：
• 可以为HTML标签设置属性。 • 通过属性为HTML元素提供附加信息。 • 属性需要设置在开始标签或自结束标签中。 • 属性总是以名称/值对的形式出现。 • 比如：name=“value” • 有些属性可以是任意值，有些则必须是指定值。 <h1 title="我是一个标题">标题</h1> <img src="" alt="" />常见属性：
id – id属性作为标签的唯一标识，在同一个网页中不能 出现相同的id属性值。 • class – class属性用来为标签分组，拥有相同class属性的 标签我们认为就是一组，可以出现相同的class属 性，可以为一个元素指定多个class。 • title – title属性用来指定标签的标题，指定title以后，鼠 标移入到元素上方时，会出现提示文字。注释： • HTML注释中的内容不会在网页中显示。 • 格式:
<!-- 注释内容 --> • 合理的使用注释可以帮助开发人员理解网 页的代码。 • 注释不能嵌套！编码问题
这个问题涉及到字符集的层面上，字符集规定了如何将文本转化为二进制代码。 常见的字符集：ASKII ISO8859-1 GBK GB2312 UTF-8乱码： 如果保存的文件是UTF-8进行的编码，而浏览器读取页面使用的是gb2312，这时就会导致页面中的内容不能正常显示，也就是乱码。
所以如果要解决乱码问题，需要将两者的字符集统一起来。
在HTML5中 <meta charset="utf-8" /></meta>
作用
– <meta> 标签可提供有关页面的元信息，比如 针对搜索引擎和更新频度的描述和关键词。 – <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值 对。 <br />换行 <p> 段落 <h1>~<h6> 标题标签 <body>网页主体标签 <title> 网页标题标签 <hr />水平分界线 <img /> 插入一张图片的标签 src =图片的路径 alt=图片的描述 读取时率先读取src目录下的资源， 定位为根目录 <a> 超链接标签href 指向一个连接的地址 target 设置打开目标页面的位置， 可选值：_blank新窗口 _self当前窗口实体： 转义字符 语法：&实体名 CSS基本语法：
CSS的样式表由一个一个的样式构成，一个 样式又由选择器和声明块构成。
– 选择器 {样式名:样式值；样式名:样式值 ; }
– p {color:red ; font-size:12px;}行内样式：
可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。
<p style="color: red;font-size: 30px"></p>优缺点：
*这种方法虽然简单，定位准确。但是由于直接把css代码写到标签内部，导致结构和表现的耦合，同时导致 样式不够复用，不推荐。*内部样式表：
可以直接将样式写到
<style> p{color:red; font-size: 30px;} </style>外部样式表
可以将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入 到文件中。
<link rel="stylesheet" type="text/css" href="style.css">选择器：会告诉浏览器：网页上的哪些元素需要设置什么样的样式。 比如：p这个选择器就表示选择页面中的所 有的p元素，在选择器之后所设置的样式会 应用到所有的p元素上。
元素选择器：元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
• 语法： 标签名 { } p{} h{} 这样是选中页面中所有的p标签 所有的h标签类选择器:可以根据元素的class属性值选取元素 语法： .className{} 比如.hello会选中页面所有class属性为 hello的元素。
ID选择器：可以根据元素的id属性值选取元素。
语法：#id{}复合选择器：可以同时使用多个选择器，这样选择同时满足多个选择器的元素。
选择器1 选择器2{}例如：div.box1会选中页面中具有box1这个 class的div元素。
群组选择器 可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
语法：选择器1,选择器2,选择器3 { } 比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。 通用选择器 可以同时选中页面中的所有 元素。 *{}HTML族谱： 伪类：给连接定义样式：
正常链接 – a:link • 访问过的链接 – a:visited（只能定义字体颜色） • 鼠标滑过的链接 – a:hover • 正在点击的链接 – a:active表示网页中的不同内容的 文本标签
<em>和<strong> 通常em显示为斜体，而strong显示为粗体。 <i>和<b> i标签会使文字变成斜体 b标签会使文字变成粗体 <small> small标签表示细则一类的旁注 <sup>和<sub> sup和sub用于定义上标和下标。 <ins>和<del> ins表示插入的内容，显示时通常会加上下划线 del表示删除的内容，显示时通常会加上删除线。 <code>和<pre> 如果你的内容包含代码示例或文件名，就可以使用code元素。pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。 <pre> <code> function fun(){ alert("hello"); } </code> </pre> 有序列表 使用ol和li来创建一个有序列表。 <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> 无序列表 使用ul和li来创建一个无序列表。 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> 定义列表 使用dl、dd、dt来创建一个定义列表。 <dl> <dt>定义项1</dt> <dd>定义描述1</dd> <dt>定义项2</dt> <dd>定义描述2</dd> <dt>定义项3</dt> <dd>定义描述3</dd> </dl>定义颜色：可以使用rgb值、也可以使用十六进制表示
文本的修饰
text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方或者中间添加线条。 • 可选值： – underline – overline – line-through – none对齐文本
可选值： – left：左对齐 – right：右对齐 – justify：两边对齐 – center：居中对齐盒子模型： CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
一个盒子分成：内容区（Content） 内边距（Padding） 边框（Border) 外边距（margin)
内容区指的是盒子中放置内容的区域，就是元素中的文本内容，子元素是存在于内容区中的。 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。 通过width和height两个属性可以设置内容区的大 小。width和height属性只适用于块元素. 内边距：内边距指的就是元素内容区与边框以内的空间。 默认情况下width和height不包含padding的大小。 ==使用padding属性来设置元素的内边距。 padding:10px 20px 30px 40px 这样会设置元素的上、右、下、左四个方向的内边距。 顺时针== padding:10px 20px 30px; 分别指定上、左右、下四个方向的内边距 ==padding:10px 20px; 分别指定上下、左右四个方向的内边距== padding:10px; 同时指定上左右下四个方向的内边距 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指 定四个方向的内边距。边框：可以在元素周围创建边框，边框是元素可见的最外部
可以使用border属性来设置盒子的边框：border:1px red solid; 分别是边框的宽度 颜色 样式
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
和padding一样，默认width和height并包括边框的宽度。 外边距：元素边框与周围元素相距的空间。 使用margin属性可以设置外边距。 用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使 元素居中。 display 我们不能为行内元素设置width、height、margin-top和margin-bottom。 我们可以通过修改display来修改元素的性质。 – block：设置元素为块元素 – inline：设置元素为行内元素visibility属性主要用于元素是否可见。
浮动 的是使元素脱离原来的文本流，在父元素中浮动起来。 浮动使用float属性。 可选值： – none：不浮动 – left：向左浮动 – right：向右浮动 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。 设置元素的背景 background-color属性用来为元素设置背景颜色。 background-image 可以为元素指定背景图片。 background-image: url(1.jpg) background-repeat用于控制背景图片的重复方式。 – repeat：默认值，图片左右上下平铺 – no-repeat：只显示图片一次，不会平铺 – repeat-x：沿x轴水平平铺一张图片 – repeat-y：沿y轴水平平铺一张图片 background-position 用来精确控制背景图片在元素中的位置 表格：table、tr、th、td 使用table标签创建一个表格。 tr表示表格中的一行。 tr中可以编写一个或多个th或td。 th表示表头。 td表示表格中的一个单元格。 caption、thead、tbody、tfoot • caption表示表格的标题。 • thead表示表格的头部。 • tbody表示表格的主体。 • tfoot表示表格的底部。 表格的样式 • 之前学习的很多属性都可以用来设置表格的样式，比如color可以用 来设置文本的颜色。padding可以设置内容和表格边框的距离。 • text-align：设置文本的水平对齐。 • vertical-align：设置文本的垂直对齐。 – 可选值：top、baseline、middle、bottom • border-spacing：边框间距 • border-collapse：合并边框 – collapse：合并边框 – separate：不合并边框表单：可以将用户填写的信息提交到服务器 