1. 常用标签
Header 标签
-
<!DOCTYPE html><html>文档类型声明 声明当前文件是一个HTML5文件文档类型声明在一个html文件中必不可少而且必须在网页第一行
-
\ 键盘按键为 Ctrl+？注释
-
<head> head中用于设置网页的相关信息
-
<meta charset="utf-8" /> 声明当前网页所采用的字符编码格式
常见的中文编码格式
gb-2312 :国标码简体中文的编码格式
GBK：扩展的国标码 也是简体中文，但是比GB2312多了更多的编码格式
utf-8:unicode万国码 基本兼容各国语言编码。现在最常用 -
<meta name="keywords" content="html5, web前端，网页开发" />
name="keywords" 表示这一行meta语句是要设置网页的关键字,content=""设置当前网页的关键字内容，多个关键字用英文逗号分隔,name属性与content属性必须同时设置，name表示需要设置的项目 content表示设置的具体内容
设置网页的描述，网页描述在网页中非常重要，在搜索引擎中搜索网页时，网页标题下面显示的一段文字就是网页的描述
- <title>这是我的第一个网页</title> title表示网页的标题 ，也就是网页选项卡上的文字
- <link rel="icon" href="img/icon.png"/>
link 标签用于将网页和其他文件进行连接
rel ="icon",rel属性表示即将连接的文件与当前网页的关系 , 属性值选择icon表示即将连接的文件是当前网页的图标,rel是标签的属性，“icon”是标签的属性值 属性值必须用引号引起来href=""表示所要连接的图片地址
Body 标签
Body 标签分为 行内元素 和 块级元素。
块级元素就是本身属性为 display:block 的元素。可以进行大的布局搭建，比如：
<div>,<p>,<h1>-<h6>,<table>,<from>......
特点：
- 独占一行，从上到下来排布
- 有宽度、高度以及盒子模型的相关css属性
- 在不设置宽度,高度的情况下，块级元素的宽度继承它父级元素内容的宽度与高度
行内元素是指本身属性为 display:inline 的元素。可以进行文字、小图标（小结构）的搭建,常见的有：
<a>,<strong>,<i>,<span>,<b>,<em>,<img>,<input>......
特点：
- 和其他内联元素从左到右在一行显示
- 没有宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值
- 内联元素的宽高是由本身内容的大小决定（文字、图片等）
- 内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
1. 标题标签
<h1>这是标题一</h1>
2. 段落标签
<p>功盖三分国</p> <!--段落标签-->
<p>名臣八阵图</p>
3. 超链接标签
<a href="http://www.baidu.com" target="_blank">百度一下</a><br>
4. 图片标签
<img src="img/杨贵妃 (2).jpg" alt="杨贵妃" title="杨贵妃"><br>
5. 强制换行
<p>功盖三分国</p> <!--段落标签-->
<p>名臣八阵图</p><br>
<p>江流石不转</p>
6. 有序列表
有序列表中的每一项用li表示type属性表示序号的类型：1表示数字， A/a表示字母，i/I表示罗马数字
<ol type="">
<li>www</li>
<li>www</li>
<li>www</li>
</ol>
7. 无序列表
ul unorder list有序列表中的每一项用li表示type属性表示序号的类型：circle表示。disc表示.square表示正方
<ul type="square">
<li>第一项
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li>第二项</li>
<li>第三项</li>
</ul>
8. 描述列表标签
<d1>
<dt>标题</dt>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
</d1>
9. 分区标签
分区标签div(px代表像素)是网页开发过程中最常用的标签，div标签可以包裹任何标签，通常配合css使用，代码示例为:
<div style="width:100px;height:50px;">分区</div>
10. span
用于包裹行内的文字，没有其他特殊的含义，可以配合CSS修改某一部分字体的样式，代码示例为：
<span style="color: red;">文字</span>
11. 倾斜加粗标签
em, strong, i, b 的区别
- em 和 i 都能倾斜 strong 和 b 都能加粗，但是 em 和 strong 多了一层强调的含义。（强调的作用：可以让搜索引擎抓取网页的重点内容，实现代码的语义化)
- em 和 strong 都是强调，但是 em 显示为倾斜，strong 显示为加粗，而且 strong 的强调含义要比em更高
12.表格/表单 form input select textarea
CSS
常用选择器
1. id 选择器
<span id='red'>文字</span>
#red {color:red;}
2. 类选择器
<span class='red'>文字</span>
.center {text-align: center}
3. 属性选择器
<a title="W3School" href="http://w3school.com.cn">W3School</a>
[title] {color:red;}
[title=W3School] {border:5px solid blue}
5. 元素选择器
<span id='red'>文字</span>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
span,a {color:red;}
6. 伪类选择器
<a class="red" href="css_syntax.asp">CSS Syntax</a>
a.red : visited {color: #FF0000}
7. 伪元素选择器
:first-line :first-letter
p:first-letter { color:#ff0000; font-size:xx-large;}
常用样式
1. 背景色
background-color
p {background-color: gray; padding: 20px;}
2. 背景图
background-image
body {
background-image: url(/i/eg_bg_04.gif);
# 背景重复规则
background-repeat:no-repeat;
# 改变图像在背景中的位置。
background-position:center;
# 防止背景跟随文档滚动
background-attachment:fixed
}
3. 字体
p {font-size:14px;}
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
h1 {font-family: Georgia, serif;}
4. 列表
ul li {list-style-image : url(xxx.gif)}
框模型
padding-left, margin-top
p {border-style: solid; border-width: 15px 5px 15px 5px;}
网友评论