1、html结构
<!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标签关系分类
嵌套标签(父子关系)
<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、图片标签
<img src="" 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‘ 在新窗口中打开页面
优化写法:
<base target="_blank"> #这么写</head><body> <a href="http://www.baidu.com">百度</a></body></html>
8、特殊符号
大于号 > >
小于号 < <
空格
9、列表
a.无序列表
<ul> <li></li> 列表项</ul>
例如:type默认为实心圆
<ul> <li>shaw</li> <li>sam</li> <li>stiven</li></ul>
Type属性:circle 空心圆
Type属性:square 实心正方形
b.有序列表
<ol> <li></li> 列表项</ol>
例如:type默认为数字
把大象放冰箱,需要几步<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> <dt></dt> 标题 <dd></dd> 用法和li一样</dl>