1 元素
1.1 语法
开始标签 | 元素内容 | 完结标签 |
---|
<p> | 段落 | </p> |
<a> | 链接 | </a> |
<br> | 换行 | |
# 以开始标签起始,以完结标签终止;# 元素内容是开始标签与完结标签之间的内容;# 空元素在开始标签中进行敞开(以开始标签的完结而完结);# 少数元素可领有属性。
1.2 元素嵌套
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>开始学习html,这是我的第一个页面,哈哈哈!</title></head><body> <h1>题目1:尽管我不会,然而我有学习的能源!</h1> <h2>题目2:明天我认真的学习了!</h2> <p>这是一个段落!</p></body></html>>
- 以上内容蕴含的元素有
<html>
、<head>
、<body>
、<h1>
、<h2>
、<p>
六个html元素;
1.3 空元素
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中敞开的;
- 比方前边说的
<br>
就是没有敞开标签的空元素; - 空元素的敞开办法为,例如
<br />
;
1.4 书写注意事项
- 元素倡议应用小写,比方
<a>dsd</a>
,而不要写<A>sdsd</A>
。
1.5 HTML标签
- 内容比拟多,能够参考学习https://www.runoob.com/tags/html-reference.html
2 属性
2.1 属性阐明
- 对TML 元素能够设置属性;
- 属性能够在元素中增加附加信息;
- 属性个别形容于开始标签;
- 属性总是以名称/值对的模式呈现,比方python中的字典,有键和值,比方
name="zhangsan"
;
2.2 示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>开始学习html,这是我的第一个页面,哈哈哈!</title></head><body> <h1>题目1:尽管我不会,然而我有学习的能源!</h1> <h2>题目2:明天我认真的学习了!</h2> <p>这是一个段落!</p> <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>>
2.3 属性举例
属性 | 阐明 |
---|
class | 规定元素的类名(classname) |
id | 规定元素的惟一 id |
style | 规定元素的行内款式 |
title | 规定元素的额定信息 |
2.4 注意事项
- 属性倡议应用小写;
- 应用双引号或单引号括起来;
- 如果遇到有双引号和单引号一起用的,留神要成对用,比方
name='gebi "laowang"'
;
3 题目
3.1 题目阐明
- 这个和markdown查不对,都应用
h
来示意; - 应用
<h1>到<h6>
标签进行定义; <h1>
是最大题目,顺次减小,<h6>
最小;
3.2 应用办法
<h1>题目1(相似一级题目,集体叫法)</h1><h2>题目2(相似二级题目,集体叫法)</h2><h1>题目1(相似一级题目,集体叫法)</h1><h1>题目1(相似一级题目,集体叫法)</h1>
3.3 举例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>题目学习</title></head><body> <h1>1、xx工具的应用</h1> <h2>1.1、xx工具的下载</h2> <h3>1.1.1、xx工具下载网址</h3> <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>>
4 水平线
4.1 HTML水平线
- 应用标签
<hr>
来定义 页面中的水平线; - 其作用可用来宰割内容。
4.2 应用办法
<p>段落1</p><hr><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><hr>
4.3 举例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平线学习</title></head><body> <p align="center">静夜思</p> <hr> <p align="center">床前明月光,</p> <p align="center">疑是地上霜。</p> <p align="center">举头望明月,</p> <p align="center">抬头思故土。</p> <hr></body></html>
5 正文
5.1 HTML正文
- 应用
<!-- xxxx -->
进行正文; - 和编程语言一样,晋升代码的可浏览性,不会被浏览器显示进去。
5.2 应用办法
5.3 举例
- vs code间接在须要加正文的代码行应用
ctrl + /
即可疾速进行代码正文;
6 段落
6.1 HTML段落
- 其实就是将文档能够分为若干个段落;
- 应用
<p>段落内容</p>
来示意; - 浏览器会主动在段落前后加空行。
6.2 应用办法
6.3 举例
- 第一种:间接应用
<p>段落内容</p>
,诗句的题目是一段,内容是一段;
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>段落学习</title></head><body> <!-- 应用一首诗来示意段落! --> <p align="center">静夜思</p> <hr> <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p> <!-- <p align="center">疑是地上霜。</p> <p align="center">举头望明月,</p> <p align="center">抬头思故土。</p> --> <hr></body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>段落学习</title></head><body> <!-- 应用一首诗来示意段落! --> <p align="center">静夜思</p> <hr> <!-- 第一种 --> <!-- <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p> --> <!-- <p align="center">疑是地上霜。</p> <p align="center">举头望明月,</p> <p align="center">抬头思故土。</p> --> <!-- 第二种 --> <p align="center">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>抬头思故土。</p> <hr></body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>段落学习</title></head><body> <!-- 应用一首诗来示意段落! --> <p align="center">静夜思</p> <hr> <!-- 第一种 --> <!-- <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p> --> <!-- 第二种 --> <!-- <p align="center">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>抬头思故土。</p> --> <!-- 第三种 --> <p align="center">床前明月光。</p> <p align="center">疑是地上霜。</p> <p align="center">举头望明月,</p> <p align="center">抬头思故土。</p> <hr></body></html>
、