HTML常用标记

2023-10-03 18:02:52

一、基础篇

1. 基础示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文档标题</title>
  </head>
   
  <body>
    文档内容......
  </body>
 
</html>

2.基础结构

html文档分为文本+标记，通过显示标记语言对文本进行修饰，然后表达渲染后的文本内容
一个网页由声明+head+body三部分组成
- 声明文档使用HTML5语法
- head 部分在页面中不显示
- body 部分为显示在页面中的内容

二、常用标签

1. 文本标签

<hn>...</hn> n为1-6的数字。标记为标题，加粗独立行。
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗，方便搜索引擎收录
<cite>...</cite> 作品标题（引用）
<sub>...</sub> 下标
<sup>...</sup> 上标
<del>...</del> 删除线

2. 格式化标签

<br/> 换行
<p>...</p> 换段
<hr/> 水平分割线
列表
- <ul>...</ul> 无序列表
- <ol>...</ol> 有序列表，其中type的值：代表起始值。
- <li>...</li> 列表项，在每一个列表中使用
- <dl>...</dl> 自定义列表
- <dt>...</dt> 自定义列表头
- <dd>...</dd> 自定义列表内容，会缩进
<div>...</div> 常用于组合块元素（高度为0，宽度填满），通过CSS对这些元素进行格式化
<span>...</span> 常用于包含的文本（没有特殊效果），可以使用CSS对他进行格式化，或通过JavaScript对他进行操作

3. 图片标签

/ 在网页中插入一张图片
属性：
- src：图片引用地址，图片名及url地址。（可以使用相对地址，或者网络地址）
- alt：图片加载失败时的提示信息
- title：文字提示的属性。（把鼠标放在图片上时提示的文字）
- width：图片宽度
- height：图片高度（通常高度和宽度只使用一个，否则容易失真）
- border：边框线粗细（颜色与字体颜色相同，通常不用）

4. 超级链接标签

<a href="">...</a> 网页中插入超级链接
属性：
- href：必填项，指链接跳转地址
- target：表示链接的打开方式
  - _blank 新窗口
  - _parent 父窗口
  - _self 本窗口（默认）
  - _top *窗口
- framename 窗口名
- title：文字提示属性（详情）
锚点链接：
- <a id="a1"> 通过id来定义一个锚点，以前用name
- <a href="#a1">跳转a1处<a> 也可以在#前加入其他页面链接

5. 表格标签

<table>...<\table> 表格标签
属性：
- border 表格线，0是没有
- width 表格宽度
- cellspacing 单元格之间的距离，默认是2，0时没有缝隙
- cellpadding 单元格的字于四边保持的最小距离，默认是0
<capion>...</capion> 表格标题
<tr>...</tr> 行标签
<th>...</th> 列头标签
<td>...</td> 列标签
属性：
- rowapan 跨行
- colspan 跨列
<thead>...</thead> 表头
<tbody>...</tbody> 表体
<tfoot>...</tfoot> 表尾

6. 表单标签**

<form>...</form> 表单标签
属性：
- action 目标地址，就是当提交表单时，提交到的地址。
- method 发送方式，分为get（以明文的方式提交），post（以隐藏的方式提交）
<input/> 表单项标签，通过不同type创建不同表单项
属性：
- type 表单项类型
  - text 文本
  - password 密码
  - radio 单选
  - checkbox 复选
  - submit 提交
  - reset 重置
  - button 按钮，没有效果，可以添加事件
  - file 上传文件
  - image 图片
  - email 邮箱
  - number 下拉选择数字
  - url 网址
  - date 日历
  - color 颜色
- name 变量名字，实现互相排斥需要相同的name
- value 默认值
- disabled 默认不能修改
- checked 默认选中，针对单选和多选使用
- min 最小值
- max 最大值
- maxlength 长度
<select> 文本选项
- </option>...<option> 每一项使用此标记，selected为默认选此项
- 对下拉框分组
<datalist>...</datalist> 可选的下拉列表
- </option>...<option> 每一项使用此标记，selected为默认选此项
<textarea>...</textarea> 多行文本输入
<button>...</botton> 标签自定义按钮

7. 行内框架标签

<iframe>...</iframe> 在网页放另一个网页
属性：
- src：规定在iframe中显示的url
- name：规定iframe的名称
- height：高度
- width：宽度
- frameborder：是否显示边框

8. 多媒体标签

<audio>...<autio> 音频标签
属性：
- src:音频引用的地址
- controls，是否显示控制
<video>...<video> 视频标签
属性：
- src:视频引用的地址
- controls，是否显示控制