Web前端教程-HTML及标签的使用

时间：2023-12-04 10:51:20

1. HTML简介

HTML由标签和属性构成的

1.1. HTML文档基本结构

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>网页标题</title>

    </head>

    <body>

          网页显示内容

    </body>

</html>

2. 标签

学习html语言就是学习标签的用法

2.1. 标签语法

长在尖号后面第一个单词就是标签（标记，元素）

  • 一组告诉浏览器如何处理一些内容的标签，通过关键字来识别， <body>, <title>, <meta>
  • 不同标签代表不同含义，比如段落标签、文本标签、链接标签、图片标签等
  • 标签一般分为两种：
    • 单标签: 声明（meta）或者插入元素(img)，
    • 双标签: 设置一段区域的内容： <p></p>

1.2. 标签的属性和值

在标签后面的，并通过空格隔开的

  • 元素内部可以设置属性和值，这些属性值用来改变元素某些方面的行为
  • 属性和属性值用等号连接，属性值用双引号括起来

1.3. 常见的标签

1. 基础标签

标签 描述
<html> 定义HTML文档
<title> 文档标题
<body> 文档主体
<h1-6> HTML标题
<p> 段落
<br> 折行
<hr> 水平线
<!--...--> 注释

2. 格式标签

标签名称 说明
a 超链接元素-->(2)
br 强制换行
wbr 安全换行(英文状态下使用)
b 加粗
strong 加粗
i 倾斜
em 倾斜
s 删除线
del 删除线
u 下划线
ins 下划线
small 小字体
sub 下标
sup 上标
code 代码
abbr 缩写(本身无实际作用)
dfn 倾斜
q 加双引号
cite 倾斜(引用标题)
ruby 包含汉语拼音
bdo 文字方向(dir = “rtl或者lfr”)
mark 突出显示(黄色背景，黑色的字)
time 显示日期与实践
span 一般性文本（一般用于CSS）
hr 空标记，水平线
&nbsp; 空格
&lt 左括号>
&gt 右括号<

3. 表单标签

  • form默认是GET方法提交，直接通过地址信息提交，用于大量文本且不敏感的信息
  • form可以通过method改为post， 输入的敏感信息就不会再地址中显示出来，用于少量文本且敏感的信息
标签名称 说明
form 定义供用户输入的HTML表单
input 输入控件
textarea 多行输入控件
button 按钮
select 选择列表
optgroup 选择列表中相关选项的组合
option 选择列表中的选项
label input 元素的标注
fieldset 定义围绕表单中元素的边框
legend 定义 fieldset 元素的标题
datalist 定义下拉列表
keygen 定义生成密钥
output 输出的一些类型

例子：

<b>1. form元素（用以用户输入数据）:</b>  <br>

<!--action：表单提交的页面， method：用get和post提交，enctype：采用编码格式，name：表单名称，target：提交目标，

    autocomplete浏览器记住用户数据，novalidate验证性,form让表单为的元素和指定的表单挂钩提交--->

<form name="form01" autocomplete="on" action="http://www.haosou.com" id="register">

    <!--fieldset对表单进行分组, name+form+disabled-->

    <fieldset>

        <!--legend为分组添加标签-->

        <legend>注册分组</legend>

        <!--label可用于CSS-->

        <label>

        <!--input属性:autofocus:光标选中，disabled不可输入，autocomplete记住用户，type，name用提交数据的，value的默认值--->

        用户名： <input name="User" value="666"> <br>

        </label>

        <label>

        <!--外部表单控件可以连接form-->

        电子邮件： <input name="email" form = "register">

        </label>

        <!--button属性: type：submit提交/reset重置/button按钮， formaction, formenctype, formmethod, formtarget, formvalidate-->

        <button>提交</button>

    </fieldset>

</form> <br>

<b>2. Input的type属性：</b> <br>

<form>

    <!--text的属性: maxlength,size, name, value, readonly, disabled, list提供建议值,required必须输入才能提交, palceholder输入字符的提示 -->

    文本：<input type="text" list="abc" required> <br>

    <!--password的属性：与text基本一致-->

    密码：<input type="password" placeholder="输入密码吧"> <br>

    搜索: <input type="search"> <br>

    <!--max,min,step,-->

    数字: <input type="number"> <br>

    范围: <input type="range"> <br>

    日期: <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> <br>

    颜色: <input type="color"> <br>

    复选框: 音乐<input type="checkbox" name="music" value="1">  体育<input type="checkbox" name="sport" value="2"> <br>

    单选框: <input type="radio" name="sex" value="1" checked>男  <input type="radio" name="sex" value="2">女 <br>

    提交: <input type = "submit"> <br>

    重置: <input type="reset"> <br>

    按钮: <input type="button"><br>

    图片按钮: <input type = "img" src="img/dog.jpg"> <br>

    email: <input type="email"> <br>

    telephone: <input type="tel"><br>

    URL: <input type="url"><br>

    隐藏:<input type="hidden" value="1"><br>

    上传文件:<input type="file" accept="image/gif"><br>

    <button>提交</button>

</form>

<datalist id="abc">

    <option value="1">苹果</option>

    <option value="2">橘子</option>

</datalist> <br>

<b>3. 下拉列表框：</b> <br>

<form action="http://www.haosou.com">

    <!--auto,disabled,form size（下拉高度）,multiple（多选）,autofocus, required-->

    <select name="fruit">

        <!--选项分组-->

        <optgroup label="水果">

            <option value="1">苹果</option>

            <option value="2" selected>橙子</option>

            <option value="3">香蕉</option>

        </optgroup>

        <optgroup label="粗粮">

            <option value="4">大米</option>

            <option value="5">稻谷</option>

            <option value="6">玉米</option>

        </optgroup>

    </select>

    <button>提交</button>

</form>  <br>

<b>4.多行文本框：</b> <br>

<form action="http://www.haosou.com">

    <!--name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried-->

    <textarea name="content" cols="30" rows="10">

        请留下你的建议

    </textarea>

    <button>提交</button>

</form> <br>

Web前端教程-HTML及标签的使用

4. 框架标签

标签名称 说明
frame 定义框架集的窗口或框架
frameset 定义框架集
noframes 定义针对不支持框架的用户的替代内容
iframe 定义内联框架

5.图形标签

标签名称 说明
img 定义图像
map 定义图像映射
area 定义图像地图内部的区域
canvas 定义图形
figcaption 定义 figure 元素的标题
figure 定义媒介内容的分组，以及它们的标题 
在页面中插入另外一个frame： <br>

<a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>

<br>

<iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>

Web前端教程-HTML及标签的使用

6. 音频视频标签

标签名称 说明
audio 声音内容
source 媒介源
track 定义用在媒体播放器中的文本轨道
video 定义视频

例子：

<h1>9.音频和视频</h1>

<!--autoplay自动播放，loop反复播放，muted静音, poster是视频开头的图片，preload加载网络video使用，none什么都不加载，metadata下第一帧，auto尽快下载-->

<video src="pink.mp4" width="640" height="480" controls poster="img/dog.jpg"></video> <br>  <br>

音频和视频几乎一样（除了没有宽高）: <br>

<audio src="xusong.mp3" controls></audio> <br>

Web前端教程-HTML及标签的使用

7. 链接标签

标签名称 说明
<a href="val"> 外部跳转用url，内部跳转用锚点#

超链接的属性

属性 说明
href 指定a所指向的资源URL
hreflong 指向的链接资源所用的语言
meida 说明所链接资源用于哪种设备
rel 说明文档与所链接资源的关系类型
target 指定用以打开锁链接自愿的浏览环境
type 说明所链接资源的MIME类型

8. 列表标签

标签名称 说明
p 段落
div 通用分组(用途较少)
blockquote 引用大段内容
pre 展示格式化的内容
hr 添加分割水平线
ul-li 无序列表
ol-li 有序列表
dl-dt-dd 生成说明列表,用于图片注释
figure-figcaption 图片及图片标题

例子如下：

无序列表:<br>

<ul>

    <li><a href="https://www.google.com.hk/">张三</a></li>

    <li>李四</li>

    <li>王五</li>

</ul> <br>

有序列表：<br>

<ol type = 'a' start="2">

        <li>张三</li>

        <li value="8">李四</li>

        <li>王五</li>

</ol> <br>

Web前端教程-HTML及标签的使用

9. 表格标签

标签名称 说明
table 表格
thead 标题行
tbody 表格主体
tfoot 表脚
tr 一行单元格
th 标题行单元格
td 单元格
col 一列
colgroup 一组列
caption 表格标题

表格的属性有如下的：

表格属性 说明
border 表格的边框
cellpadding 单元格内容和边框距离
cellspacing 单元格之间的距离
align 水平对齐方式
valign 垂直对齐方式
colspan 单元格水平合并
rowspan 单元格垂直合并

例子如下：

<!--cellpadding: 内容和边框的距离-->

<!--cellspacingg: 格子之间的距离-->

<table border="1" width="500" height = "300" cellpadding="10" cellspacing = "10">

  <!--表的标题-->

  <caption>这是标题</caption>

  <!--设置某一列为红色-->

  <colgroup>

      <!--第一列不设置-->

      <col>

      <!--第二列为红色-->

      <col style = "background: red;" span = "1">

  </colgroup>

  <!--tr表示一行-->

  <tr>

    <!--th表示表头-->

    <!--valign表示垂直对齐-->

    <th valign="top">序号</th>

    <th>产品名称</th>

    <th>产品价格</th>

    <th>产品数量</th>

    <th>统计</th>

  </tr>

  <tr>

    <!--colspan表示水平合并-->

    <td colspan="5">水平合并</td>

  </tr>

  <tr>

    <!--td表示一格-->

    <!--align表示水平对齐-->

    <td align="center">1</td>

    <td align="center">苹果</td>

    <td>￥5.00</td>

    <td>1000</td>

    <!--rowspan表示垂直合并-->

    <td rowspan="3"></td>

  </tr>

  <tr>

    <td>2</td>

    <td>橘子</td>

    <td>￥6.00</td>

    <td>2000</td>

  </tr>

  <tr>

    <td>3</td>

    <td>葡萄</td>

    <td>￥16.00</td>

    <td>2300</td>

  </tr>

</table> <br>

Web前端教程-HTML及标签的使用

10. 样式/节 标签

标签名称 说明
style 文档的样式信息
div 文档的节
span 文档的节
header section或者page的页眉
footer section或者page的页脚
section 定义section
article 定义文章
aside 定义页面内容之外的内容
details 定义元素的细节
dialog 定义对话框或窗口

相关文章