HTML
目录
[TOC]
什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
<!DOCTYPE html>
<!-- 网页的语言 zh代表中文 -cn是区域表示 -->
<html lang="zh-cn">
<head>
<!-- 字符编码UTF-8 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>notebook</title>
<!-- 引用外部样式表style.css -->
<link rel="stylesheet" type="text/css" href="./style.css">
<!-- 引入外部 js -->
<script src="./script.js"></script>
</head>
<body>
<h1>一级标题</h1>
<article>
this is a article:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, eligendi aut vel quasi tempore alias aliquid possimus minus accusantium. Eum reprehenderit dolor possimus sapiente, molestias accusamus porro hic placeat assumenda?
</article>
<h2>二级标题</h2>
<p>段落标签</p>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- alt 内容无法载入 img 时显示 -->
<img src="IMG_5165.jpg" alt="this is a introduce text">
<!-- controls 表示显示控制按钮 -->
<audio controls>
<source src="" type="audio/mp3">
<source src="" type="audio/mpeg">
<!-- 如果浏览器不支持以上两种格式，可以显示一条替代信息 -->
<p>你的浏览器不支持内嵌音频元素</p>
</audio>
<video controls>
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<!-- 如果浏览器不支持以上两种格式，可以显示一条替代信息 -->
<p>你的浏览器不支持内嵌视频元素</p>
</video>
<!-- 超链接 -->
<a href="http://www.imxiaohu.cn">click</a>
<button>按钮 click</button>
<!--
tr：tr 是 table row 的缩写，表示 表格的一行。
td：td 是 table data 的缩写，表示表格的 数据单元格。
th：th 是 table header的缩写，表示表格的 表头单元格。
thead 定义表格头部 包含列标题
tbody 定义表格数据区域
-->
<table>
<!-- 表格头部 -->
<thead>
<tr>
<!-- 表格列标题 -->
<th>id</th>
<th>name</th>
<th>address</th>
<th>tel</th>
</tr>
</thead>
<tbody>
<!-- 第一行数据 -->
<tr>
<td>1</td>
<td>xiaohu</td>
<td>henan</td>
<td>1552727</td>
</tr>
<!-- 第二行数据 -->
<tr>
<td>2</td>
<td>xiaoming</td>
<td>hebei</td>
<td>1666882</td>
</tr>
</tbody>
</table>
<!-- 无序列表 -->
<ul>
<li>xiaohu</li>
<li>xiaoming</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>xiaohu</li>
<li>xiaoming</li>
</ol>
<!--
区块元素 以新行开始: <h1>, <p>, <ul>, <table>
内联元素 不会新行开始: <b>, <td>, <a>, <img>
<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素， 内联元素(inline)
-->
<!--
<form> 元素用于创建表单，
action 属性定义了表单数据提交的目标 URL，
method 属性定义了提交数据的 HTTP 方法
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。
type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
-->
<form action="/" method="post">
<!--
required属性表示该字段是必填项。
name 表单控件的名字
-->
<!-- 输入框 -->
<label>name</label>
<input type="text" id="name" name="name" required>
<label>password</label>
<input type="password" id="password" name="password" required>
<!--
单选框 checked默认选中
<label for="sub">订阅</label> 它与ID为 "sub" 的表单控件相关联
并且当用户点击这个标签文本“订阅”时，相应的表单控件会被激活或聚焦
-->
<label>gender</label>
<input type="radio" id="male" name="gender" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender">
<label for="female">女</label>
<!-- 复选框 -->
<label>subscribe</label>
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送</label>
<!-- 下拉框 -->
<label for="country">国家</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="us">US</option>
<option value="uk">UK</option>
</select>
</form>
</body>
</html>