文章目录
一、一个网页的基本结构
<!DOCTYPE html>
<html>
<head>
<!--这是一段注释。注释不会在浏览器中显示。-->
<title>HTML 简介</title>
</head>
<body>
<p>p是段落</p>
</body>
</html>
- !DOCTYPE html :文档声明头。告诉了浏览器,本文档处理的是 HTML 文档
- html标签 : 根标签,表示文档的开始
- head : 网页的头部,设置网页的相关信息
- title : 设置网页标题
- body : 定义文档的主体,文档主内容
- p : 是段落
二、标签格式
a、双标签
<标记名></标记名>
- 常见的标签
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
b、单标签
<标记名/>
- 常见的标签
<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />
<!--插入图片-->
三、标签关系
a、嵌套关系
<head>
<title> </title>
</head>
b、并列关系
head></head>
<body></body>
四、常见标签
a、h标签:标题
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
b、p标签:一段文字
<p>我是第一段文字,实验楼,做实验,学编程</p>
<p>我是第二段文字,实验楼,做实验,学编程</p>
c、图片标签
<img src="图片地址"/>
d、a标签: 超链接标签
<a href="https://www.baidu.com//">百度</a>
e、div标签: 块级标签
- 可以设置宽高,是网页的一块位置
<div style="width:520px;height:520px;background:blue">块级元素</div>
- div布局
<div style="width:100%;border:1px solid #d4d4d4">
<div style="background-color:pink">底色</div>
<div style="background-color:skyblue">布局</div>
</div>
- 与table类似,
f、span标签:块级标签
- 要与CSS 同时使用才可以为指定文本设置样式属性
<div id="box">这是div标签,自动换行</div>
<div id="box">我们都是块,但是我自动换行</div>
<span>这是span标签,不自动换行</span>
<span>我们都是块,但是我不换行</span>
g、其他
- 空格标签
<p>这是一段文字 前面有很多空格但是只显示一个</p>
<p>这是一段文字 用了空格字符</p>
- 换行
<p>下面是换行符</p>
<br />
<p>上面是换行符</p>
- 水平分割线
<hr />
每天进步一点点,体会学习的乐趣