HTML5标签介绍

最新推荐文章于 2021-07-01 07:52:21 发布

七月_M

最新推荐文章于 2021-07-01 07:52:21 发布

阅读量279

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/began2009/article/details/108425978

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一语义化标签

语义化

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

span标签

示例：把下面的第一段话“美国梦”三个字设置成blue

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
    <style>
    span {
        color:bule;
    }
    </style>
</head>

<body>
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

header标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>

<body>
    <header>我是头部标签</header>
    
</body>

</html>

section标签

如网站中专栏部分。

二效果标签

换行标签<br />

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范

三表格标签

表格

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
</head>

<body>
    <!--border属性给表格加上边框 -->
    <table border="1">
        <!-- 表格标题标签 -->
        <caption>前端三剑客</caption>
        <tr>
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr>
        <tr>
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
    </table>
    
</body>

</html>

实现效果:

使用thead、tbody、tfoot定义表格

<thead>标签定义表格头部,<tbody>标签来定义表格的内容,<tfoot>来定义表格的底部。

<thead>标签定义表格的表头。该标签用于组合HTML表格的表头内容。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead>标签表示表格头部,一般放<tr>和<th>标签。
<tbody>标签表示表格内容,一般放<tr>和<td>标签。
<tfoot>标签表示表格脚部标注,一般放<tr>和<td>标签。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>使用thead、tbody、tfoot标签</title>
</head>

<body>
    <h2>成绩表</h2>
    <hr>
    <table border="1">
        <thead>
            <tr>
             <th>科目</th>
             <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文</td>
                <td>99</td>
            </tr>
             <tr>
                <td>数学</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <td>159</td>
            </tr>
        </tfoot>
    </table>
    
    
</body>

</html>

实现效果：

四表单标签

使用HTML表单（form），网站可以与用户进行交互。

表单可以把用户输入的数据传送到服务器端。

语法：

<form   method="传送方式"   action="服务器文件">

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

input标签

placeholder属性

<input type="text" placeholder="请输入关键字">

placeholder属性为输入框占位符,里面可以放提示的输入信息。
placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
占位符内容不是输入框真正的内容。

数字输入框

<body>
    <input type="number">
    
</body>

input的type属性设置为number,则表示该输入框的类型为数字。
数字框只能输入数字，输入其他字符无效。
数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

网址输入框

input的type属性设置为url,则表示该输入框的类型为网址。
输入框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

<body>
    <input type="url">
    
</body>

邮箱输入框

Input的type属性设置为email,则表示该输入框的类型为邮箱。
输入框的值必须包含@。
输入框的值@之后必须有内容,否则会报错误提示。

<body>
    <input type="email">
    
</body>

单选框复选框

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

同一组的单选按钮，name 取值一定要一致.

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

实现效果:

textarea标签

示例：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

cols和 rows 这两个属性可用css样式的width和height来代替：cols用width、rows用height来代替。

label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<label for="uname">输入你的用户名</label>
  <input type="text" id="uname" placeholder="Enter uname">

下拉菜单

select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
select标签里面只能放option标签，表示下拉列表的选项。
option标签放选项内容，不放置其他标签。
value：向服务器提交的值，标签中间是显示的值
selected="selected"：设置selected="selected"属性，则该选项就被默认选中。

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

提交按钮

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

`重置按钮`

<input type="reset" value="重置">

七月_M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5标签介绍

一语义化标签语义化标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。span标签示例：把下面的第一段话“美国梦”三个字设置成blue
复制链接

扫一扫