初识HTML
一.什么是HTML
定义
- Hyper Text Markup Language（超文本标记语言）
- 超文本 包括：文字、图片、音频、视频、动画等
优势
- 跨平台
- 市场的需求
- 浏览器支持
W3C标准
- W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，国际中立性技术标准机构
- http://www.3c.org/
- http://www.chinaw3c.org/
- W3C标准
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
<body>、</body>等成对的标签，分别叫开放标签、闭合标签
<hr/>：意为自闭合标签，用/关闭空元素
二.网页的基本信息
- DOCTYPE声明
- <title>标签
- <meta>标签
<!--DOCTYPE :告诉浏览器要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!--meta描述性标签，用来描述网站的一些信息 -->
<!--meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name = "keywords" content="html">
<meta name = "description" content="学习html">
<!--网页标题-->
<title>Title</title>
</head>
<!--网页主体-->
<body>
hello world～
</body>
</html>
三.网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签 -->
<p> 一闪一闪亮晶晶 </p>
<p> 满天都是小星星</p>
<!--换行-->
挂在 天空放光明<br/>
好像许多小眼睛<br/>
<!--水平线标签-->
<hr/>
<!--粗体、斜体-->
<h1>字体样式标签</h1>
粗体：<strong>hi baby～</strong><br/>
斜体：<em>hi baby～</em><br/>
<!--特殊符号-->
空 格<br/>
空 格<br/>
><br/>
≶<br/>
©<br/>
</body>
</html>
四.图像标签
常见的图像格式
- JPG
- GIF
- PNG
- BMP
标签
<img src="path" alt="text" title="text" width="x" height="y">
地址 替代的文字 标题 长 高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--图片
src:地址 相对地址（../ = 上一级目录），绝对地址
alt:图片加载失败后显示的文字
-->
<img src="../resources/image/1.jpg" alt="美少女加载失败了～" title="美少女">
</body>
</html>
五.超链接
标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
链接路径 链接在哪个窗口打开
- 文本超链接
- 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--链接标签
href:要跳转到哪个页面
_blank:在另一个网页打开
-->
<!--文本超链接-->
<a href="../resources/image/1.jpg" target="_blank">点击我观看美少女</a>
<a href="http://www.baidu.com" target="_self">点击我进入百度</a>
<br/>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="美少女加载失败了～" title="美少女">
</a>
</body>
</html>
超链接
- 页面间链接
- 锚链接
- 功能性链接
<!--使用name作为标记--> <a name="top">顶部</a> <!--锚链接 1.需要一个锚标记 2.跳转到标记 #--> <a href="#top">回到顶部</a><!--功能性链接邮件链接：mailto:--><a href="mailto:*******@qq.com">点击联系我</a>
六.行内元素和块元素
- 块元素：无论内容多少，该元素独占一行（p、h1-h6～）
- 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em～）
七.列表
- 定义：列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展示出来，以便浏览者能更快捷的获得相应的信息
- 分类：
- 无序列表
- 有序列表
- 子定义列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body><!--有序列表 order list应用范围：试卷，问答--><ol> <li>java</li> <li>python</li> <li>c++</li> <li>vue</li></ol><hr/><!--无序列表应用范围：导航，侧边栏--><ul> <li>bianling</li> <li>sb</li> <li>lj</li></ul><!--自定义列表dl：标签dt：列表名称dd：列表内容应用范围：公司底部--><dl> <dt>学科</dt> <dd>java</dl> <dd>python</dl> <dd>c</dl> <dd>c++</dl> <dt>精通</dt> <dd>java</dl> <dd>python</dl> <dd>c</dl> <dd>c++</dl></dl></body></html>
八.表格标签
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行（合并）
- 跨列
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格学习</title></head><body><!--表格:tabletr:行td:列--><table border="1px"> <tr><!-- colspan跨列 参数为跨几列 --> <td colspan="3">1-1</td> </tr> <tr><!-- rowspan跨行 参数为跨几行 --> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td>3-1</td> <td>3-2</td> </tr></table></body></html>
九.视频和音频
- 视频元素 video
- 音频 audio
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>视屏和音频</title></head><body><!-- 音频和视屏controls:控制条autoplay:自动播放loop 当音频结束时重新循环开始播放--><video src="../resources/video/~" controls autoplay></video><audio src="../resources/audio/test.mp3" controls autoplay loop></audio></body></html>
十.页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面结构分析</title></head><body><header> <h2>网页头部</h2> <nav>导航</nav></header><section> <h2>网页主体部分</h2></section><footer> <h2>网页脚部</h2></footer></body></html>
十一.iframe内敛框架
<iframe src="path" name="mainFrame"></iframe> 引用页面地址 框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!--内联框架-->
<iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
<a href="https://www.csdn.net/?spm=3001.4476" target="hello">点击跳转</a>
</body>
</html>
十二.初识表单post和get
<form method="post" action="result.html">
<p>名字：<input name="name" type="text"> </p>
<p>密码：<input name="pass" type="password"> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重置"/>
</p>
</form>
- method：规定如何发送表单数据常用值：get/post
- action：表示向何处发送表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
action:表单提交位置，可以是网站，也可以是请求处理地址
method:提交方式
get 方式提交 ，可以在url中看到我们提交的信息，不安全，高效
post:安全，可传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit" name="sub" value="提交">
<input type="reset" name="reset" value="重置">
</p>
</form>
</body>
</html>
文本框和单选框
| 属性 | 说明 |
|---|---|
| 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时，指定按钮是否被选中 |
表单的应用
- 隐藏域
- 只读
- 禁用
表单初级验证
优势：安全、减轻压力
- 常用方式
- placeholder 提示信息
- required 不能为空
- pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
action:表单提交位置，可以是网站，也可以是请求处理地址
method:提交方式
get 方式提交 ，可以在url中看到我们提交的信息，不安全，高效
post:安全，可传输大文件
value="小婷" 默认值
maxlength="4" 最大字符个数
size="30" 文本框长度
readonly：只读
hidden:隐藏
-->
<form action="1.我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>密码：<input type="password" name="pwd" required></p>
<p>性别：
<input type="radio" value="boy" name="sex">男孩
<input type="radio" value="girl" name="sex">女孩
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby" disabled>游戏
<input type="checkbox" value="study" name="hobby" checked>学习
</p>
<!--按钮
type="button" 普通按钮
type="image" 图像按钮 - 默认提交
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮
<input type="button" value="点击变长" name="bt1">
<!-- <input type="image" src="../resources/image/1.jpg">-->
</p>
<!--下拉框、列表框-->
<p>下拉框：
<select name="国家">
<option value="CHINA" selected>中国</option>
<option value="ETH">瑞士</option>
<option value="RUS">俄国</option>
<option value="YD">印度</option>
</select>
</p>
<!--文本域-->
<p>反馈：
<textarea name="textarea" cols="50" rows="10"></textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="点击上传" name="upload">
</p>
<!-- 验证 -->
<p>邮箱：
<input type="email" name="e-mail">
</p>
<p>url：
<input type="url" name="url">
</p>
<p>商品数量：
<input type="number" name="num" max="100" min="1" step="1">
</p>
<!--滑块-->
<p>音量：
<input type="range" name="range" max="50" min="10" step="10">
</p>
<!--搜索-->
<p>搜索
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点我试下</label>
<input type="text" id="mark">
</p>
<!-- 自定义邮箱 - 正则表达式校验-->
<p>自定义邮箱:
<input type="text" name="dyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>
<p>
<input type="submit" name="sub" value="提交">
<input type="reset" name="reset" value="重置">
</p>
</form>
</body>
</html>
Mac idea快捷键
command + / 注释
command + option + l 格式化
command + 回车 +4 截图
html ，写完标签后 + tab，快速生成标签
扫一扫
2101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
