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、特殊符号
空格:
大于号: >
小于号: <
版权符号: ©
五、图像标签
<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://img-blog.csdnimg.cn/20210320213612692.png?x-oss-process=image/watermark,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