html 重要标签和标签属性
- meta 标签 两个属性 http -equid 和name
1.http-equiv属性
功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。
(1)设置网页的字符集
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
(2)网页自动刷新
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com"> //2秒钟后，跳转到凤凰网
2.name属性
name属性主要用于设置网页的搜索关键字、版权信息、作者等。
(1)设置网页搜索关键字
<meta name="keywords" content="网站建设，企业网站建设，网站制作，网上商城，网站推广，域名注册，中企动力" />
(2)设置网页描述信息
<meta name="description" content="网站建设、网站制作专家中企动力，为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>
- 图像标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | url | 图像路径 |
| alt | 文本 | 图片无法显示时显示文本 |
| title | 文本 | 鼠标悬停时显示内容 |
| width | 像素 | 图像宽度 |
| height | 像素 | 图像的高度 |
代码实例：
<img
width="1000"
height ="600"
alt="图片无法显示"
title="谨以此图纪念马克思与恩格斯的伟大友谊"
src="C:\Users\Administrator\Desktop\pic\test.jpg"/>
- a 锚
a 英文来源 anchor 锚定
| 属性 | 英文原文 | 描述 |
|---|---|---|
| href | hypertext reference(超级 文本 连接 ) | 连接地址 |
| target | target 目标 | 弹出方式 (_self 本窗口弹出 _blank 弹出新窗口) |
1.外链必须加http:// 头
2.可以引用各种多媒体元素图像表格 网页内id等等
<a href="https://www.baidu.com/" target="_blank">超链接测试文本</a>
-
href 可以缺省写作href=“#”
-
href引用页内id可以实现回到顶部等功能，如果跳转到其他页面的指定位置需要href=“连接地址#目标id”
<h2 id="1">
40.6上海创记录高温
</h2>
<a href="#1">回到顶部</a>
-
base 基础网址标签
base标签是HTML语言中的基准网址标记，它是一个单标签，位于网页头部文件的head标签内，一个页面最多只能使用一个base元素，用来提供一个指定的默认目标，也算是一种表达路径和连接网址的标记。常见的url路径形式分别有相对路径与绝对路径，如果base标签指定了目标，浏览器将通过这个目标来解析当前文档中的所有相对路径，包括的标签有（a、img、link、form），也就是说，浏览器解析时会在路径前加上base给的目标，而页面中的相对路径也都转换成了绝对路径。使用了base标签就应带上href属性和target属性。
image.png
- 列表标签
无序列表ul 英文释义:un order list
列表头是ul 内部嵌入 li标签表示一个列表的一个元素 ，li标签必须嵌入 ul中
<ul>
<li>
习近平谈全球治理
</li>
<li>
总理出访全镜头
</li>
<li>
上班年出生人口4成2孩
</li>
</ul>
效果图：
image.png
- 有序标签
ol 英文释义order list
有序列表类似无序列表但是会自动给元素加上序号
<ol>
<li>
美国 喵喵喵
</li>
<li>
英国 呜呜呜
</li>
<li>
中国 呱呱呱
</li>
</ol>
效果图：
image.png
- 自定义标签
| 标签名 | 英文释义 | 描述 |
|---|---|---|
| dl | define list | 自定义列表 |
| dt | define | 自定义表头 |
| dd | define details | 自定义列表详情 |
<dl>
<dt>
定义表格标题1
</dt>
<dd>
定义表格内容1
</dd>
<dd>
定义表格内容2
</dd>
<dt>
定义表格标题2
</dt>
<dd>
定义表格内容3
</dd>
<dd>
定义表格内容4
</dd>
<dd>
定义表格内容5
</dd>
</dl>
代码效果
image.png
- 表格标签
| 标签名 | 英文释义 | 描述 | 嵌入位置 |
|---|---|---|---|
| table | 表格 | 表格标签名 | |
| tr | table row | 表格的行 | 只能内嵌th 和tr |
| td | table details | 表格详情 | |
| thead | table head | 表格头 | |
| tbody | table body | 表格体 | |
| tfoot | table foot | 表格尾部 | |
| th | table head | 表头 | tr 内部 |
| caption | caption | 标题 | table 内thead 之前 |
两个重要属性
| 属性名 | 描述 |
|---|---|
| rowspan | 跨行合并 |
| colspan | 跨列合并 |
<table border="1">
<caption>
这里是表格标题
</caption>
<thead>
<tr>
<th>
推荐个股
</th>
<th>
当前价格
</th>
<th>
目标价格
</th>
</tr>
</thead>
<tbody align="center">
<tr>
<th>
茅台股份
</th>
<td>
7.5
</td>
<td>
10
</td>
</tr>
<tr>
<th>
中国石油
</th>
<td>
7.6
</td>
<td>
12
</td>
</tr>
<tr>
<th>
长安汽车
</th>
<td colspan="2">
缺资料
</td>
</tr>
</tbody>
</table>
效果图
image.png
-
表单
1.input 标签的
标签为单标签，type属性为其最基本的属性 类型 ，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。
image.png
2.label 标签
label 标签用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
3.textarea 文本域
用于多行文本的输入可以通过参数 cols 和rows 限定 列数和行数
4.下拉选择框
select
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
5.from 标签
表示一个表单的作用域，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
同时from还限制了一些表单标签的作用域 例如在下面的列子中的nosex单选框不会对其他性别单选框造成影响，但是你去不能同时选中male和fmale
表单相关代码实例:
<body>
<STRONG>
<i>
表单测试
</i>
</STRONG>
<form>
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">male</label>
<br>
<input type="radio" name="sex"id="fmale" value="fmale"> fmale
</form>
<input type="radio" name="sex" id="nosex" value="nosex">nosex
<br>
<textarea cols=10 rows="5">默认的文本内容？
</textarea>
<br>
<STRONG>
选择支付方式
</STRONG>
<br>
<select>
<option>
银联
</option>
<option>
支付宝
</option>
<option>
微信
</option>
<option>
肉偿
</option>
</select>
</body>
效果如下
image.png
