HTML超文本标记语言

HTML链接

HTML 链接<a>

HTML 链接是通过标签 来定义的.

<a href="https://www.baidu.com">这是一个链接</a>

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问

HTML 图像

图像标签（ img）和源属性src

在 HTML 中，图像由 标签定义。
img 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的,在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

<img src="" alt="Pulpit rock" width="304" height="228">

1
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 列表

有序列表

<ol >
    <li> 烤冷面</li>
    <li> 煎饼果子</li>
	<li> 麻辣烫</li>
</ol>

无序列表

<ul >
    <li> 烤冷面</li>
    <li> 煎饼果子</li>
	<li> 麻辣烫</li>
</ul>

去掉列表前的符号圆圈和数字

/* 去掉a底下的横线 */
a {
    text-decoration-line: none;
}
ol,
ul {
    list-style: none;
}

HTML表格

表格由标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    <table align="center" border="1" cellpadding="8" cellspacing="0">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td colspan="2" align="center">row 1, cell 1</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

table border=“1” 边框
cellpadding=“8” 代表单元格边框到内容之间的距离（留白）
cellspacing=“0” 用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。
align=“center” 表单居中
rowspan=“2” 竖直方向占两个格子
colspan=“2” 水平方向占两个格子

HTML 表单和输入

HTML 表单
表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（）。

文本域（Text Fields）
输入类型是由类型属性（type）定义的。

<form align="center">
	<input type="text" placeholder="仅允许输入数字"></td>
	<br>
	<input type="text">
	<br>
	<input type="password">
</form>

placeholder属性 对用户做一个对输入内容的提醒或者指引
password 密码框

单选按钮（Radio Buttons）

标签定义了表单单选框选项

<form>
    <input type="radio" value="前端" name="sex">前端<br>
    <input type="radio" value="后台" name="sex" checked>后台<br>
    <input type="radio" value="全栈" name="sex">全栈
</form>

复选框（Checkboxes）

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮(Submit Button)
定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

    <form name="input" action="html_form_action.php" method="get">
        Username: <input type="text" name="user">
        <input type="submit" value="Submit">
        <button type="submit">提交</button>
        <button>重置</button>
    </form>

选择

<select name="" style="height: 50px; width: 200px;">
<option value="--请选择政治面貌--">--请选择政治面貌</option>
	<option value="群众">群众</option>
	<option value="共青党员">共青党员</option>
    <option value="党员">党员</option>
</select>

定义一个多行的文本输入控件

可自己调节大小

 <textarea cols="60" rows="1"></textarea>

cols 文本区域内可见的列数（值：number）
rows 本区域内可见的行数（值：number）