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> |