1.3 HTML常用标签介绍

优质

小牛编辑

135浏览

2023-12-01

1.3.1 文本标签:

<hn>...</hn> 其中n为1--6的值。标题标签（加粗、独立行）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引用）
<sub>...</sub>下标 <sup>...</sup>上标
<del>...</del> 删除线

1.3.2 格式化标签:

<br/> 换行
<p>...</p> 换段
<hr /> 水平分割线
列表：
- <ul>...</ul> 无序列表
- <ol>...</ol> 有序列表其中type类型值：A a I i 1 start属性表示起始值
- <li>...</li> 列表项
- <dl>...</dl> 自定义列表
- <dt>...</dt> 自定义列表头
- <dd>...</dd> 自定义列表内容
<div>...</div> 常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span>...</span> 常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

1.3.3 图片标签img*

<img /> 在网页中插入一张图片
    属性：
        src： 图片名及url地址
        alt: 图片加载失败时的提示信息
        title：文字提示属性
        width：图片宽度
        height：图片高度
        border：边框线粗细

1.3.4 HTML中的超级链接*

<a href=" ">...</a> 超级链接标签
    属性：
        href: 必须，指的是链接跳转地址
        target: 表示链接的打开方式：
            _blank  新窗口
            _parent 父窗口
            _self   本窗口（默认）
            _top    顶级窗口
            framename 窗口名
        title：文字提示属性（详情）
锚点链接：
    定义一个锚点：<a id="a1"></a> 以前使用的是 <a name="a1"></a>
    使用锚点：    <a href="#a1">跳到a1处</a>

1.3.5 表格标签

<table>...</table>  表格标签: 属性：border width cellspacing cellpadding
<caption>...</caption> 表格标题
<tr>...</tr>  行标签
<th>...</th>  列头标签
<td>...</td>  列标签: 跨行属性rowspan  跨列属性：colspan   

<thead>...</thead>  表头
<tbody>...</tbody>  表体
<tfoot>...</tfoot>  表尾

1.3.6 form表单标签 (其中1~5重点，其他了解)

(1) <form>...</form> 表单标签

form标签常用属性：
    *action属性:提交的目标地址(URL)
    *method属性:提交方式:get(默认)和post
        get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
        post方式是URL地址不可见,长度不受限制,相对安全.
    enctype:提交类型
    target: 在何处打开目标 URL。
    name:属性为表单起个名字.在HTML5中使用 id 代替。

(2) <input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

    具体在下面有详解：
    如：<input type="text" name="username">
    *type属性:表示表单项的类型:值如下:
            text:单行文本框
            password:密码输入框
            checkbox:多选框 注意要提供value值
            radio:单选框   注意要提供value值
            file:文件上传选择框
            button:普通按钮 
            submit:提交按钮
            image:图片提交按钮
            reset:重置按钮, 还原到开始(第一次打开时)的效果
            hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

            email 用于应该包含 e-mail 地址的输入域
            url 用于应该包含 URL 地址的输入域
            number 用于应该包含数值的输入域。
                max    规定允许的最大值
                min    规定允许的最小值
                step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
                value 规定默认值
            range 用于应该包含一定范围内数字值的输入域，显示为滑动条
                max    规定允许的最大值
                min    规定允许的最小值
                step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
                value 规定默认值
            日期选择器 Date pickers    
                date - 选取日、月、年
                month - 选取月、年
                week - 选取周和年
                time - 选取时间（小时和分钟）
                datetime - 选取时间、日、月、年（UTC 时间）
                datetime-local - 选取时间、日、月、年（本地时间）
            search    用于搜索域，比如站点搜索或 Google 搜索
            color 颜色选择

        *name属性: 表单项名,用于存储内容值的
        *value属性: 输入的值(默认指定值)
        *placeholder: 预期值的简短的提示信息
        size属性: 输入框的宽度值
        maxlength属性: 输入框的输入内容的最大长度
        readonly属性: 对输入框只读属性
        *disabled属性: 禁用属性
        *checked属性: 对选择框指定默认选项
        accesskey属性: 指定快捷键(不常用) (IE:alt+键  火狐:alt+shift+键)
        tabindex属性: 通过数字指定tab键的切换顺序(不常用)

        src和alt是为图片按钮设置的

        注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空
            image图片按钮，默认具有提交表单功能。

(3) <select>...</select> 标签创建下拉列表。

    name属性:定义名称,用于存储下拉值的
    size：定义菜单中可见项目的数目，html5不支持
    disabled 当该属性为 true 时，会禁用该菜单。 
    multiple 多选
    <option>... </option>  下拉选择项标签,用于嵌入到<select>标签中使用的;
        *value属性:下拉项的值
        *selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多行的文本输入区域

    name :定义名称,用于存储文本区域中的值。
    cols ：规定文本区内可见的列数。
    rows ：规定文本区内可见的行数。
    disabled： 是否禁用
    readonly： 只读
    ...
    默认值是在两个标签之间

(5) <button>...</button> 标签定义按钮。

您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

(6) <fieldset> --fieldset 元素可将表单内的相关元素分组。

    disabled属性：定义 fieldset 是否可见。
    form属性： 定义该 fieldset 所属的一个或多个表单。

(7) <legend></legend> -- 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。

<form>
  <fieldset>
    <legend>个人信息：</legend>
    姓名：<input type="text" /><br/>
    年龄：<input type="text" /><br/>
  </fieldset>
  <br/><br/>
  <fieldset>
    <legend>健康信息：</legend>
    身高：<input type="text" /><br/>
    体重：<input type="text" /><br/>
  </fieldset>
</form>

(8) <optgroup> html5标签--<optgroup> 标签定义选项组。此元素允许您组合选项

城市：
<select name="city">
    <optgroup label="河北省">
          <option>石家庄</option>
          <option>保定</option>
          <option>廊坊</option>
    </optgroup>
    <optgroup label="河南省">
          <option>郑州</option>
          <option>安阳</option>
          <option>周口</option>
    </optgroup>
</select>

(9) <datalist> html5标签--<datalist>标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<form action="demo_form.php" method="get">
    搜索：
    <input type="search" list="namelist" name="keywords"/>
    <datalist id="namelist">
        <option value="zhangsan">
        <option value="zhangsanfeng">
        <option value="zhangwuji">
        <option value="lisi">
        <option value="lixiaolong">
    </datalist>
</form>

1.3.7 `<iframe>`...`</iframe>` 行内框架

属性：src：规定在 iframe 中显示的文档的 URL
      name：规定 iframe 的名称
      height：规定 iframe 的高度。
      width：定义 iframe 的宽度。
      frameborder：规定是否显示框架周围的边框。

例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

1.3.8 多媒体标签（了解）

<audio src="./images/beidahuang.mp3" controls="controls">
    你的浏览器不支持播放
</audio>
<br/>
<audio controls="controls">
    <source src="./images/beidahuang.mp3" type="audio/mpeg" />
    你的浏览器不支持播放
</audio>

<br/><br/>
<video controls="controls" width="400" height="400">
    <source src="./images/fun.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm">
    你的浏览器不支持视频播放
</video>

<video  controls loop poster="tiao.jpg">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    您的破浏览器该扔了，不支持视频标签
</video>

<br/><br/>

<embed src="./images/haowan.swf" width="300" height="300" />