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：不合并边框
表单：可以将用户填写的信息提交到服务器
扫一扫
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
