测开之HTML・第一篇《HTML语法基础》
Posted 七月的小尾巴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测开之HTML・第一篇《HTML语法基础》相关的知识，希望对你有一定的参考价值。
目录
html页面结构
超文本标记语言的结果包含“头”部分（Head)、和“主体”部分（Body）。其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--主体部分 页面中显示内容-->
<h1>这是第一个网页</h1>
</body>
</html>
文档声明
<!DOCTYPE html> 声明改 html 文件使用的是 HTML版本。
页面头部
第二行 <html> 标签和最后一行 </html> 定义 html 文档的整体， <html> 标签中的 lang=“en” 定义网页的语言为英文，定义成中文是 lang=“zh-CN”。<head> 标签和 </head>是他的第一层子元素。
<head> 标签里负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和 javascript 文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。
页面内容
<body>元素定义文档的主体，也就是页面的显示内容。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
常见的HTML标签
注释
注释的定义和用法
注释标签用于在源代码中插入注释，注释不会显示在浏览器中
<!--这里是注释-->
标题标签
<h1> <h6> 标签可定义标题大小， <h1> 定义最大的标题， <h6> 定义最小的标题。
由于 h 元素 拥有确切的语义，因此请您慎重的选择恰当的标签成绩来构建文档结构。因此，请不要利用标题标签来改变同一行中的字体大小。
<h1>这里是标题</h1>
<h2>这里是标题</h2>
<h3>这里是标题</h3>
<h4>这里是标题</h4>
<h5>这里是标题</h5>
<h6>这里是标题</h6>
段落和换行标签
-
p: 标签定义段落。元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p> -
br：插入一个简单的换行符。标签是空标签，意味着它没有结束标签。
错误的用法：
<br></br> -
hr：标签在HTML页面中创建一条水平线。水平分割线可以在视觉上将文档分割成各个部分，在HTML中，
<hr>标签没有结束标签。
块标签
- div标签：标签块元素，表示一块内容，没有具体的语义。
div 标签可以把文档分割为独立、不同的部分。他可以用做严格的组织工具，并且不使用任何格式与其关联。
如下方代码，div中的部分会显示为红色：
<div style="color:red">
<h5>这里是标签 H5</h5>
</div>
- span标签：行内元素，表示一行中的一小段内容，没有具体的语义。
span 没有固定的格式表现。当对他应用样式时，它才会产生视觉上的变化。
<p>
元素会自动在其前后创建一些空白。浏览器会自动添加这些空间。
<span style="color: cyan">span中的内容</span>
您也可以在样式中规定
</p>
含样式和语义的行内标签
| 标签 | 含义 |
|---|---|
<em> | 行内元素，字体斜体 |
<i> | 行内元素，语义为强调内容，表示重要（斜体效果） |
<b> | 行业元素，字体加粗 |
<strong> | 行业元素，语义为强调内容，表示非常重要（效果加粗） |
<em>这里是em标签</em>
<i>这里是i标签</i>
<strong>这里是strong</strong>
<b>这里是b标签</b>
图像标签和链接标签
- img标签
img 元素向网页嵌入一副图像。
请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占用空间。
<img>标签有两个必须的属性：src 属性 和 alt属性
<img src="https://oss-fg.feng-go.com/assets/pic/image2021081630398908349738782.jpeg"
alt="测试鸭" width="1300" height="460">
| 属性 | 描述 |
|---|---|
alt | 规定图像代替文本 |
src | 规定显示图像的url |
height | 定义头像的高度 |
width | 设置图像的宽度 |
- a 标签：标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 herf 属性，它指示链接的目标。
<a href="https://oss-fg.feng-go.com/assets/pic/image2021081630398908349738782.jpeg">
点击跳转链接查看图片</a>
- link标签（放在头部中）
链接到一个外部样式，即链接外部css文件
列表
有序列表
在网页上定义一个有编号的内容列表可以用 <ol>、 <li> 配合使用来实现，代码如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
</ol>
无序列表
在网页上生成一个无编号的内容可以用 ul 、 <li>配合来实现，代码如下：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
表格
- table：table 标签定义 HTML表格
简单的 HTML 表格由 table 元素以及一个或者多个tr、th、 或td组成。
tr 元素定义表格行，th元素定义表头、td元素定义表格单元。
<table border="1">
<tr>
<th>测试用例编号</th>
<th>测试用例标题</th>
<th>测试步骤</th>
</tr>
<tr>
<td>Test01</td>
<td>测试正常登录</td>
</tr>
<tr>
<td>Test02</td>
<td>测试异常登录</td>
</tr>
</table>
表单
form标签
- form：标签用于为用户输入创建HTML表单，表单能够包含
input元素，比如文本字段、复选框、单选框、提交按钮等等
| 属性 | 描述 |
|---|---|
| action | 定义表单数据提交地址 |
| method | 定义表单提交的方式（常见的有 get 和 post） |
from表单中包含的元素
| 元素标签 | 作用 |
|---|---|
<label> | 作为表单定义文本标注 |
<input> | 定义通用的表单元素 |
<textarea> | 定义多行文本输入框 |
<select> | 定义下拉表单元素 |
<option> | 与 <select>标签配合，定义下拉表单元素选项 |
input标签
<!--登录页面-->
<body>
<form action="" method="post">
<label for="">账号</label>
<input type="text" name="user"><br>
<label for="">密码</label>
<input type="password" name="pwd">
<input type="submit" value="提交">
<input type="button" value="按钮">
</form>
</body>
- type属性
| 值 | 作用 |
|---|---|
| text | 定义单行文本输入框 |
| password | 定义密码输入框 |
| radio | 定义单选框 |
| checkbox | 定义复选框 |
| file | 定义上传文件 |
| submit | 定义提交按钮 |
| button | 定义一个普通按钮 |
| reset | 定义重置按钮 |
| image | 定义图片作为提供按钮，用src属性定义图片地址 |
| hidden | 定义一个隐藏表单域，用来存储值 |
label 标签
label 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现文化委特殊效果，不过，他为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发控件。就是说，当用户选择标签时，浏览器就会自动焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的id属性相同
<label for="username">邮箱账号</label>
<input type="text" name="email" id="username">
<br>
textarea标签
textarea 标签定义多行文本的输入控件。
文本区中可容纳无限数量的文本，其中文本默认字体是等宽字体（通常是Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，更好的办法是使用 CSS 的 height 和 width 属性。
<!--文本输入框-->
<label for="">详细地址</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点 |
| cols | number | 规定文本区内的可见宽度 |
| disabled | disabled | 规定禁用该文本区 |
| form | form_id | 规定文本区域所属的一个或多个表单 |
| maxlength | number | 规定文本区域的最大字符数 |
| name | name_of_textarea | 规定文本区的名称 |
| placeholder | text | 规定描述文本区域预期值的简短提示 |
| readonly | readonly | 规定文本区为只读 |
| required | required | 规定文本区域是必填 |
| rows | number | 规定文本区内的可见行数 |
select 标签
select 元素可创建单选或者多选菜单，也可以用于选择数量提交表单
<select> 元素中的 <option></option> 标签用于定义列表中的可用选项。
<!--下拉框-->
<label for="">生日：</label>
<select name="year" id="y">
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
</select> 年
option 标签
option 元素定义下拉框列表中的一个选项，流浪器将 <option></option> 标签中的内容作为 <select> 标签的菜单或者滚动列表中的一个元素显示。option 元素位于 select 元素内部。
下面我们根据上面所学的内容，定义一个登录提交表单页面，如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="">
<label for="username">邮箱账号</label>
<input type="text" name="email" id="username">
<br>
<label for="">昵称</label>
<input type="text" name="nickname">
<br>
<label for="">密码</label>
<input type="password" name="pwd1">
<br>
<label for="">确认密码</label>
<input type="password" name="pwd2">
<br>
<label for="">性别</label>
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女"> 女
<br>
<label for="">爱好</label>
<input type="checkbox" name="hobby" value="看电视"> 看电视
<input type="checkbox" name="hobby" value="逛街"> 逛街
<input type="checkbox" name="hobby" value="购物"> 购物
<br>
<!--下拉框-->
<label for="">生日：</label>
<select name="year" id="y">
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
</select> 年
<select name="mouth" id="m">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>月
<select name="day" id="d">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>日
<br>
<!--文本输入框-->
<label for="">详细地址</label>
<textarea name="" id="" cols=测开之数据类型・第一篇《Python数据类型元祖和列表的性能分析》