1、html结构
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>html结构</title>
</head>
<body>
“主体结构”
</body>
</html>
|
<!DOCTYPE html> 告诉浏览器当前文档类型（html）
<html></html> 根标签
<head></head> 定义了头部
<title></title> 网页的名称（标题）
<body></body> 网页主体（网页中看到的所有信息都放在body标签中）
2、html标签关系分类
HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级.
容器级的标签:里面可以放置任何东西。
文本级的标签里面:只能放置文字、图片、表单元素。
文本级标签：p、a
容器级标签:h
嵌套标签（父子关系）
|
1
2
3
|
<head>
<title></title>
</head>
|
并列关系
<head></head>,<body></body>
3、html标签分类
双标签（有开始，有结束）
<head></head>
单标签:只有开始标签，没有结束标签
4、单标签
a．文本注释标签：
<!--- 文本注释内容 --->(快捷键: Ctrl+/)
b．横线标签
<hr />
c．换行标签
<br />
5、双标签
a．标题标签
<hn></hn>n:1-6
取值越大，字体越小。切记：没有h7以后的标签
b．段落标签
<p></p>
c．字体标签
<font color="red" size="30px"></font>
d．文字加粗
<strong></strong>,<b></b>
e．文字斜体显示
<em></em>,<i></i>
f．下划线
<ins>下划线</ins>,<u></u>
g．删除线
<del>原价880</del>,<s></s>
6、图片标签
<imgsrc="" alt="" title="" width="" height="">
src 图片的名称/图片的路径
alt 图片无法正常加载的时候，对图片的说明
title 当鼠标放到图片上显示的文字
width 设置宽度
height 设置高度
7、超链接
<a href="http://www.baidu.com">百度</a> 实现网页之间的跳转
鼠标放到超链接上显示的文字：
<a href="http://www.baidu.com" title="这是百度">百度</a>
锚链接：
a．在页面中写一个超链接
<a href="#shaw">找百度去</a>
b．给任何一个标签id取值和a标签中的 href取值一样
<p id="shaw">我是百度</p>
总结：实现在本页面中跳转
target='_blank' 在新窗口中打开页面
优化写法：
|
1
2
3
4
5
6
|
8、特殊符号
大于号 > >
小于号 < <
空格
9、列表
a．无序列表
|
1
2
3
|
<ul>
<li></li> 列表项
</ul>
|
例如：type默认为实心圆
|
1
2
3
4
5
|
<ul>
<li>shaw</li>
<li>sam</li>
<li>stiven</li>
</ul>
|
Type属性：circle 空心圆
Type属性：square 实心正方形
b．有序列表
|
1
2
3
|
<ol>
<li></li> 列表项
</ol>
|
例如：type默认为数字
把大象放冰箱，需要几步
|
1
2
3
4
5
|
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
|
Type属性：type="I" 条状I II III
Type属性：type="1 | A | a | I"等
Type属性：type="a" start="2" 表示序列类型为小写字母，排序从第二个开始
c．自定义列表
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
|
1
2
3
4
|
<dl>
<dt></dt> 标题
<dd></dd> 用法和li一样
</dl>
|