首页 > 其他分享> 文章详细

HTML5

2021-03-20 22:00:22 阅读：183 来源： 互联网

标签：网页标签表单 HTML5 按钮 input type

HTML5

一、什么是HTML

超文本标记语言

二、W3C标准

结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM）

三、标签含义

DOCTYPE：告诉浏览器，我们要使用什么规范。

head标签代表网页头部。

body标签代表网页主体。

title标签代表网页标题。

meta标签：描述性标签，用来描述我们网站的一些信息。

四、网页基本标签

1、标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2、段落标签

<p></p>

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

粗体：<strong></strong>
斜体：<em></em>

6、注释和特殊符号

注释：<!-- 这里的内容均为注释 -->

7、特殊符号


空格: &nbsp;

大于号：  &gt;

小于号：  &lt;

版权符号： &copy;

五、图像标签

<img src="../resources/image/1.png" alt="文字替代内容" title="悬停文字" width="300" height="300">

src:图片地址（相对地址，绝对地址）

  ../  ：表示上级目录

alt:图片名字

六、链接标签

a标签

在这里插入图片描述

<a href="1.我的第一个网页.html" target="_blank">点击跳转至我的第一个网页</a><br>

href:必填，表示要跳转那个页面

target:表示窗口在哪里打开

      _blank:在新标签打开

      _self:在自己的网页打开

锚链接：

1、需要一个锚标记

 <a name="top">顶部</a>
 <a name="down">底部</a>

2、跳转到标记


 <a href="#top">回到顶部</a>
 <a href="4.链接标签.html#down"></a>

功能性链接：

邮件链接：mailto


<a href="mailto:lbt19980826@163.com">点击联系我</a>

七、行内元素和块元素

在这里插入图片描述

八、列表标签

有序列表

<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
    <li>c#</li>
</ol>

无序列表


<ul>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
    <li>c#</li>
</ul>

定义列表

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dt>地区</dt>
    <dd>天津</dd>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

九、表格标签

![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20210320213612692.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Jvb2tpZV9sYnQ=,size_16,color_FFFFFF,t_70

表格：table

行：tr rowspan:跨行

列：td colspan:跨列

<table border="1px">
    <tr>
      <td colspan="3" align="center">          学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">刘宝腾</td>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
</table>

十、视频和音频

在这里插入图片描述

src:资源路径
controls:控制条
autoplay:自动播放

<video src="../resources/video/视频.mp4" controls autoplay></video>
<audio src="../resources/audio/是七叔呢%20-%20客子光阴.flac" controls autoplay></audio>

十一、页面结构分析

在这里插入图片描述

十二、iframe内联框架

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>


<iframe src="https://www.baidu.com" frameborder="0" width="800" height="800" name="bilibili"></iframe>
<a href="https://www.bilibili.com" target="bilibili">点我跳转</a>

十三、初识表单POST和GET提交

action:表单提交的位置，可以是网站，也可以是一个请求处理地址。

method:

   get方式可以在url地址栏看到，不安全，高效 

   post方式，比较安全，可以传输大文件

文本输入框： input标签 type=""

<form action="1.我的第一个网页.html" method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password" ></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

十四、文本框和单选框

单选框标签：

input type=“radio”

value:单选框的值

name:表示组

checked：默认选中

<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女片

十五、按钮和多选框

多选框：

input type="checkbox"

checked   默认选中

按钮：

input    type="button"（普通按钮）

            type="image"(图片按钮，会自动提交)

            type="submit"(提交按钮)

            type="reset”"（重置按钮）

<p>
    <input type="checkbox" value="study" name="hobby">学习
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="football" name="hobby">足球
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="chat" name="hobby">聊天
</p>
<p>
    <input type="button" value="点击变长">
    <input type="image" src="../resources/image/1.png" width="30" height="30">
</p>

十六、列表框（下拉框）文本域和文件域

下拉框

<p>地区
    <select name="area" id="">
        <option value="tj">天津</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="cq">重庆</option>
        <option value="sz" selected>深圳</option>
    </select>
</p>

文本域：

<textarea name="answer"  cols="30" rows="10">反馈信息</textarea>

文件域：

input type=“file”


<input type="file" name="file">

十七、搜索框滑块和简单验证

邮件验证

input type=“email”

<input type="email" name="email">片

url验证

input type=“url”

<input type="url" name="url">

数字验证

input type=“number”

     max:最大值

     min:最小值

     step:间隔

<input type="number" name="age" max="150" min="0" step="0.5">

滑块

input type=“range”

     max:最大值

     min:最小值


<input type="range" name="high" max="250" min="30">cm

搜索框

input type=“search”

十八、表单的应用

隐藏域: hidden

只读： readonly

禁用: disabled

增强鼠标可用性： for:指定输入框id


<p>
<label for="password">密码：</label><input type="password" name="password" id="password">
</p>片

十九、表单初级验证

placeholder:提示信息

required: 不能为空

pattern: 正则表达式

二十、HTML总结

1、HTML基本结构

2、网页的基本标签

   标题标签、段落标签、换行标签、水平线标               签、注释、特殊符号

3、图像标签

img

4、超链接

锚链接、功能型连接（邮箱、QQ）

5、行内元素和块元素

6、列表

有序列表、无序列表、自定义列表

7、表格

行、列、跨行、跨列

8、媒体元素

音频、视频

9、网页的简单布局

头部、脚步、主体

10、内联框架

iframe

11、表单

form(post,get)、文本框、密码框、单选框、多选框、按钮、下拉框、滑块。。。

12、表单应用

隐藏域、只读、禁用

13、表单的初级验证

placeholder:提示信息

required: 不能为空

pattern: 正则表达式

相关配套资源：https://download.csdn.net/download/rookie_lbt/15993694
文章借借鉴子狂神说，推荐学习：www.kuangstudy.com

标签：网页,标签,表单,HTML5,按钮,input,type
来源： https://blog.csdn.net/rookie_lbt/article/details/115035206

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5

HTML5

一、什么是HTML

二、W3C标准

三、标签含义

四、网页基本标签

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、注释和特殊符号

7、特殊符号

五、图像标签

六、链接标签

a标签

锚链接：

功能性链接：

七、行内元素和块元素

八、列表标签

有序列表

无序列表

定义列表

九、表格标签

十、视频和音频

十一、页面结构分析

十二、iframe内联框架

十三、初识表单POST和GET提交

十四、文本框和单选框

十五、按钮和多选框

十六、列表框（下拉框）文本域和文件域

下拉框

文本域：

文件域：

十七、搜索框滑块和简单验证

邮件验证

url验证

数字验证

滑块

十八、表单的应用

十九、表单初级验证

二十、HTML总结