HTML基础

1、HTML介绍

超文本标记语言（英语：H yperT ext M arkup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

2、HTML标题

• HTML 标题是通过<h1>-<h6> 标签来定义的，一般最多用到3-4级标题。

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

3、HTML段落

HTML is a very good language

• 可以将这行文字封装成一个段落元素使其在单独一行呈现

<p>HTML is a very good language</p>

通过开始标签、结束标签、内容组成为一个完整的元素。

4、嵌套元素

元素除了单独使用也可进行嵌套。

<!--通过strong元素强调HTML-->
<p><strong>HTML</strong> is a very good language</p>

5、图像

src为图片所在地址，alt为图片的描述。

<img src="./test.png" alt="test image" />

6、链接

href为链接地址，a标签之间为显示内容。

<a href="www.baidu.com">百度</a>

7、常见属性

属性名	元素	描述
action	form	处理通过表单提交的信息的程序的 URI。
allow	iframe	指定 iframe 的特性策略。
alt	area、img、input	在图片无法显示时展示的替代文本。
autofocus	button、input、select、textarea	页面加载后，该元素应自动获得焦点。
autocomplete	button、input、select、textarea	指示浏览器是否可以自动填充表单中的值。
autoplay	audio、video	音视频应该自动播放。
background	body、table、td、th	指定图像文件的 URL。**备注：**虽然浏览器和电子邮件客户端可能仍然支持此属性，但它已经过时。请使用 CSS background-image 代替。
color	font、hr	该属性为文本设置颜色，可以使用具名颜色或十六进制 #RRGGBB 格式的颜色。**备注：**这是遗留属性。请使用 CSS color 属性代替。
datetime	del、ins、time	指示与元素关联的日期和时间。
download	a、area	指示用于下载资源的超链接。
for	label、output	描述与当前元素绑定的元素。
form	button、fieldset、input、label、meter、object、output、progress、select、textarea	指示该元素所属的表单。
height	canvas、embed、iframe、img、input、object、video	指定此处列出的元素的高度。对于其他所有元素，请使用 CSS height 属性。**备注：**对于某些实例，例如 div，这是一个遗留属性，对于这些实例应使用 CSS height 属性代替。
high	meter	指示高值区间的下限值。
href	a、area、base、link	关联资源的 URL。
id	全局属性	通常与 CSS 一起使用，以为特定元素添加样式。此属性的值必须是唯一的。
label	optgroup、option、track	为元素指定用户可读的标题。
lang	全局属性	定义元素中使用的语言。
list	input	指示建议用户输入的预定义选项列表。
low	meter	指示低值区间的上限值。
media	a、area、link、source、style	指定链接资源所设计的媒体的提示。
name	button、from、fieldset、iframe、input、object、output、select、textarea、map、mata、param	元素的名称。例如，用于服务器标识表单提交中的字段。
open	details、dialog	指示内容目前是否可见（若用于 <details> 元素）或对话框是否处于活动状态且可以与之交互（若用于 <dialog> 元素）。
preload	audio、video	指示是否应预加载整个资源、部分资源或者不预加载。
referrerpolicy	a、area、iframe、img、link、script	指定在获取资源时发送哪个引荐来源（referrer）。
rowspan	td、th	定义表格单元格应跨越的行数。
shape	a、area
sizes	link、img、source
span	col、colgroup
src	audio、embed、iframe、img、input、script、source、track、video	可嵌入内容的 URL。
style	全局属性	定义将覆盖先前设置的 CSS 样式。
target	a、area、base、form	指定打开链接文档的位置（若用于 <a> 元素）或显示接收到的响应的位置（若用于 <form> 元素）。
title	全局属性	在鼠标悬停在元素上时显示的提示文本。
translate	全局属性	指定当页面本地化时，元素的属性值和其文本节点后代的值是否应该被翻译，或者是否应该保持不变。
type	button、input、embed、object、ol、script、source、style、menu、link	定义元素的类型。
value	button、data、input、li、meter、option、progress、param	定义页面加载时元素中显示的默认值。
width	canvas、embed、iframe、img、input、object、video	确定此处所列元素的宽度。**备注：**对于其他所有实例，例如 div，这是一个遗留属性，对于这些实例应使用 CSS height 属性代替。
wrap	textarea	指示文本是否应该换行。

8、字体样式

<h1 style="font-family: KaiTi">这是一个标题</h1>

• 通用：宋体 SimSun

• 黑体 SimHei

• 微软雅黑 Microsoft YaHei

• 微软正黑体 Microsoft JhengHei

• 新宋体 NSimSun

• 新细明体 PMingLiU

• 细明体 MingLiU

• 标楷体 DFKai-SB

• 仿宋 FangSong

• 楷体 KaiTi

• 仿宋_GB2312 FangSong_GB2312

• 楷体_GB2312 KaiTi_GB2312

9、表格

9.1 无表头表格

<table>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

9.2 有表头表格

<table>
  <tr>
    <th>姓名</th>
    <th>班级</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>3</td>
    <td>33</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>4</td>
    <td>44</td>
  </tr>
</table>

10、列表

10.1 无序列表

无序列表 （Unordered List）中项目的顺序并不重要，就像购物列表。用一个ul元素包围。

<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together...
</p>

可以改为：

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together...</p>

10.2 有序列表

有序列表 （Ordered List）中项目的顺序很重要，就像烹调指南。用一个 ol 元素包围。

<p>
    五禽戏的动作顺序与五行相关，按照国家体育总局新编套路的顺序依次是虎、鹿、熊、猿、鸟。五禽戏是中国传统导引养生的一个重要功法，其创编者华佗。
</p>

可以改为：

<p>五禽戏的动作顺序与五行相关，按照国家体育总局新编套路的顺序依次是</p>
<ol>
    <li>虎</li>
    <li>鹿</li>
    <li>熊</li>
    <li>猿</li>
    <li>鸟</li>
</ol>
<p>五禽戏是中国传统导引养生的一个重要功法，其创编者华佗。</p>

11、HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>