WEB标准由结构（structure）、表现（presentation）、行为（behavior）
遵循web标准的好处：1、让发展前景更广阔 2、内容能被更广泛感知 3、更容易被搜索引擎搜索 4、降低网站流量费用 5、使网站更易于维护 6、提高网页浏览速度
生成页面骨架：!+TAB
导航栏：
vertical-align : top （保持在顶部）
修改li 前面标志：
list-style-type: square;
文本格式化：粗体（strong/b）、斜体（em/i）、删除线（del、s）、下划线（ins/u）
div 分割、分区（一行一个） span 跨度（一行可显示多个）
img标签（属性：Alt 如果img内容不显示，则显示Alt所指的内容
title 鼠标悬浮在图片上时显示文本值 可以给图像设置宽度width，高度height（宽高设置一个就行，会进行一个等比例缩放），边框border）
相对路径：图片相对于HTML页面的位置
（同一级路径：img.ipg 下一级路径：images/img.jpg
上一级路径：../img.jpg）
绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
< a href=跳转目标 target=目标窗口的弹出方式>文本或图像<a>
anchor 锚 target用于指定页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
网站内部页面之间的相互连接：直接连接《a href》
空连接：a href=# 空连接会刷新页面
如果href里面地址是一个文件.exe或一个压缩包.zip，会下载这个文件(网页元素：图片、音频、视频）
<a href=网址><img src=图片格式></a>
a标签也是有titile属性（写logo时候可以用到）
锚点连接：点击连接可以快速定位到页面中的每个位置(两步）
1、<a href="#two">第二集</a> #获取ID名字
2、<h3 id="two">第二集介绍</h3>
返回顶部：反着来，在顶部添加锚点：
<h2 id="top">目录</h2>
<a href="#top">返回顶部</a>
***** 空格 <（<） >(>)段落标签
table 表格： tr 每一行 td 单元格 th 表头
*******Ctrl+d 选中下一个相同的目标
table里面不可以随便写标签，可以写thead、tbody、tr、th
align 表格位置
cellspacing 单元格间距
cellpdding单元边框与其内容之间的空白，默认一（内部距离）
rowspan 合并单元格的个数（最上册单元格为目标）（跨行）
coispan 合并单元格的个数（最左侧单元格为目标）（跨列）
便捷：tr>td*8(tbody中写）几列复制几次
*******Ctrl+左 跳过一整个单词
*******table>tr*5>td{$}*6（创作一个5行6列的表格）+TAB
*******Alt+Z 自动换行
box-shadow ： 水平位置 垂直位置 模糊距离 模糊大小 颜色 inset
text-shadow ： 水平位置 垂直位置 模糊距离 颜色 inset
填充文字之后如果文字占比太大：
CSS（在style里写）：table-layout: fixed; 表格固定
td{ 减少文字占比 word-wrap: break-word;
文字居中 text-align: center;}
<form> 会把它范围内的表单元素信息提交给服务器.
实现代码：
<form action=“url地址” method=“提交方式（get/post）” name=“表单域名称">各种表单元素控件</form>
<input type="属性值" />输入
<label for="sex">男</label> 输入元素定义标签（自动标亮）
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
为了防止单多选按钮太小选不到可以采用以下方法：
<label for="sex">男</label> <input type="radio" id="sex">
（此方法点击“男”既可以选中，for为了获取关联）
<select> 表单元素（下拉列表）
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
在option中加selected="selected"时，默认页面打开时被选中
<textarea> 标签是用于定义多行文本输入
cols=“每行中的字符数” ，rows=“显示的行数”
checked 属性默认第一次被选中 maxlength 字符最大长度
value input的值
botton 普通按钮，无法提交表单信息
submit 提交按钮，可以提交表单信息（只提交带有name属性的元素）
CheckBox 复选按钮
radio 单选按钮
reset 重置按钮
file 文件域 上传文件
所有东西居中：margin 0 auto；
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明
1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分
所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
结构需要用class属性来调用 class 类
<div class="类名"> 变红色 </div>
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
长名称或词组可以使用中横线来为选择器命名。
多类名的具体使用：
1. <div class="red font20">亚瑟</div>
注意：
1.在标签class 属性中写 多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式
### id选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。 注意：id 属性只能在每个 HTML 文档中出现一次
###通配符选择器：
语法：
* {
属性1: 属性值1;
...
}
通配符选择器不需要调用， 自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
* {
margin: 0;
padding: 0;
}
font-size 属性定义字体大小。
1.px（像素）大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4.可以给 body 指定整个页面文字的大小
font-weight 属性设置文本字体的粗细。
normal 默认不加粗 bold 加粗
100-900 400=normal，700=bold（数字后不跟单位）
1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
font-style 属性设置文本的风格。
normal 默认 italic 斜体
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body { font: font-style font-weight font-size/line-height font-family;}
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
color 属性用于定义文本的颜色。
text-align 属性用于设置元素内文本内容的水平对齐方式。
（只能移动文本，不移动标签）（比如P标签（长度由父元素定义决定）和SPAN标签（标签长度由文本决定））
text-decoration：underline（下划线）；修饰文本
none 没有装饰线
text-indent：20px；文本缩进 （em相对单位，px绝对单位）
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离：line-height: 26px;
行高的文本分为 上间距 文本高度 下间距 = 行间距
（更多的时候用行高做单行文本垂直居中）
## css样式表：
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
行内样式表（行内式）是在元素标签内部的 style 属性中设定 CSS 样式
<div style="color: red; font-size: 12px;">青春不常在</div>
1.style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
2.可以控制当前的标签设置样式
3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
<style>
div {
color: red;
font-size: 12px;
}
</style>
1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰，但是并没有实现结构与样式完全分离
4.使用内部样式表设定 CSS，通常也被称为嵌入式引入，
外部样式表（链接式）样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：
<link rel="stylesheet" href="css文件路径">
在 CSS 中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
|
|
收藏
淘帖
踩
