HTML基础
1.初识HTML
1.1什么是HTML
- Hyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等。
1.2HTML5发展史
- 目前用的是HTML5+CSS3
1.3HTML5优势
- 世界知名厂商对HTML5支持
- 市场的需求
- 跨平台
1.4W3C标准
- W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构。
- https://www.w3.org/
- https://www.chinaw3c.org/
- W3c标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
2.网页基本标签
2.1HTML基本结构
- html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>·········标题
</head>
<body>
我的第一个网页 ·······················主体
</body>
</html>
<!-- 我是注释 -->·······快捷键：(ctrl+/)
- 网页基本信息
<!DOCTYPE html>标签：DOCTYPE告诉浏览器使用什么规范。<title>标签：网站标题。<meta>标签：描述网站信息，一般用来做SEO。
2.2网页基本标签
-
标题标签
<h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> -
段落标签
<p>两只老虎,两只老虎</p> <p>跑得快,跑得快</p> <p>一只没有耳朵</p> <p>一只没有尾巴</p> <p>真奇怪,真奇怪</p> -
换行标签
两只老虎,两只老虎 <br/> 跑得快,跑得快<br/> 一只没有耳朵<br/> 一只没有尾巴<br/> 真奇怪,真奇怪<br/> -
水平线标签
<hr/> -
字体样式标签
粗体：<strong>I love you</strong> 斜体：<em>I love you</em> -
注释和特殊符号
<!--我是注释--> 空格： 大于：> 小于：< 版权符号：© 特殊符号：& ;
3.图像，超链接，网页布局
3.1图像标签
<!--
src：图片地址
相对地址，绝对地址（不推荐）
../······上一级目录
-->
<img src="./resources/image/1.jpg" alt="美女图片" title="动漫美女头像" width="384" height="216">
3.2链接标签
3.2.1页面间链接
<!--
href：必填，表示要跳转到哪个网页
target：表示窗口在哪里打开
_blank 新窗口
_self 当前窗口，默认
-->
<!--文字跳转-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!--图片跳转-->
<a href="https://www.baidu.com" target="_self">
<img src="./resources/image/1.jpg" alt="美女图片" title="动漫美女头像" width="384" height="216">
3.2.2锚链接
<!--页面内跳转-->
定义标签:
<a name="top">顶部</a>
跳转到标签：
<a href="#top">回到顶部</a>
<!--页面间跳转-->
标记页面：（2.html）
<a name="down">底部</a>
跳转到页面：
<a href="2.html#down">回到2.html底部</a>
3.2.3功能性链接
邮件链接：
<a href="mailto:3166335486@qq.com">点击联系我</a>
4.列表，表格，媒体元素
4.1行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行。
- p、h1-h6
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- a、strong、em
4.2列表
4.2.1定义
- 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快地获得相应的信息。
4.2.2分类
-
无序列表
<ol> <li>java</li> <li>python</li> <li>c++</li> </ol> -
有序列表
<ul> <li>java</li> <li>python</li> <li>c++</li> </ul> -
定义列表
<dl> <dt>编程</dt> <dd>java</dd> <dd>python</dd> <dd>c++</dd> </dl>
4.3表格
<!--表格 table
行 tr ，跨行 rowspan
列 td ，跨列 colspan
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
4.4媒体元素
4.4.1视频和音频
-
视频video
<!-- src：播放路径 controls：控制条 outplay：自动播放 --> <video src="./resourses/video/1.mp4" controls outplay></video> -
音频audio
<!-- src：播放路径 controls：控制条 outplay：自动播放 --> <audio src="./resourses/audio/1.mp3"></audio>
5.页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面的一块独立区域 |
| article | 独立文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
6.iframe内联框架
<!--iframe内联框架
src：地址
width，height：宽度，高度
-->
内嵌百度：
<iframe>
src="https://www.baidu.com/" frameborder="0" width="1000px" height="800px"
</iframe>
跳转到指定内联框架：
<iframe>
src="" name="helllo" frameborder="0" width="1000px" height="800px"
</iframe>
<a herf="地址">点击跳转</a>
7.表单及表单应用
7.1表单语法
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理的地址。
method：post，get 提交方式
get方式：可以在url中看到提交的信息，不安全，高效
post方式：在url中看不到提交的信息，比较安全，可以传输大文件
-->
<form method="post" action="result.html">
<!--input type="text"：文本输入框,name：一般给表单命一个名字-->
<p>名字: <input type="text" name="username"> </p>
<!--input type="password"：密码输入框,name：一般给表单命一个名字-->
<p>密码: <input type="password" name="pwd"> </p>
<!--单选框标签
name把他们放在一个组中，让他们只能单选
checked:默认选中
-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框
checked:默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮
-->
<hr>
<p>
<input type="button" name="btn1" value="点击边长">
<input type="image" src="./resources/image/1.jpg">
</p>
<!--下拉框，列表框
checked:默认选中
-->
<p>国家：
<select> name="国家"
<option value="china">中国</option>
<option value="UK">英国</option>
<option value="USA">美国</option>
<option value="India">印度</option>
</select>
</p>
<!--文本域
-->
<p>反馈：
<textarea name="text" id="反馈" cols="30" rows="10"></textarea>
</p>
<!--文件域
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证
-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--url验证
-->
<p>url：
<input type="url" name="url">
</p>
<!--数字验证
-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块
-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框
-->
<p>搜索：
<input type="search" name="search">
</p>
<!--增强鼠标可用性（点击文字跳转到框）
-->
<p>
<label for="mark">你点我试试</label>
<input type="text">
</p>
<p>
<input type="submit"> <!--提交按钮-->
<input type="reset"> <!--重置按钮-->
</p>
</form>
7.2表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认text。 |
| name | 指定表单元素名称。 |
| value | 元素的初始值。type为radio时必须指定一个值。 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。 |
| maxlength | type为text或password时，输出的最大字符数。 |
| checked | type为radio或checkbox时，指定按钮是否被选中。 |
7.3表单的应用
- 隐藏域（hidden）
- 只读（readonly）
- 禁用（disabled）
8.表单初级验证
- 为什么要进行表单验证？
- 减轻服务器压力
- 常用方式
- placeholder（提示信息：例 ：请输入用户名）
- required（表示元素不能为空）
- pattern（正则表达式）
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
