1_Html
一. 引言
1.1 HTML概念
- 网页, 是网站中的一个页面, 是构成网站的基本元素, 是承载各种网站应用的平台. 通俗的说, 网站就是由网页组成的, 通常我们看到的网页都是以html或html后缀结尾的文件, 俗称HTML文件
1.2 HTML5
- 目前网页常用
- 提供了一些新的元素和一些有趣的新特性, 同时也建立了一些新的规则. 这些元素, 特性和规则的建立 提供了许多新的网页功能, 如使用网页实现动态渲染图形, 图表, 图像和动画, 以及不需要安装任何插件直接使用网页播放视频等
- 优势:
- 世界知名浏览器厂商对HTML5的支持
- 微软, Google, 苹果, Opera, Mozilla
- 市场的需求
- 跨平台
- 世界知名浏览器厂商对HTML5的支持
1.3 W3C标准
- W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年, Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言
- HTML, XML
- 表现标准语言
- CSS
- 行为标准
- DOM, ECMAScript
- 结构化标准语言
二. HTML简介
2.1 什么是HTML
- HTML全称: Hyper Text Markup Language(超文本标记语言)
- 超文本: 包括文字, 图片, 音频, 视频, 动画等
- 标记: 标签, 不同的标签实现不同的功能
- 语言: 人与计算机的交互工具
2.2 HTML能做什么
- HTML使用标记标签来描述网页, 展示信息给用户
2.3 HTML书写规范
- HTML标签是以尖括号包围的关键字
- HTML标签通常是成对出现的, 有开始就有结束
- HTML通常都有属性, 格式: 属性="属性值"(多个属性之间空格隔开)
- HTML标签不区分大小写, 建议全小写
2.4 IDEA快捷键
- 生成注释: Ctrl + Shift + / 或者 Ctrl + /
- 生成标签: Tab
三. HTML基本标签
3.1 结构标签
<html>: 根标签
<head>: 网页头标签
<title>: 网页的标题</title>
</head>
<body>: 网页正文</body>
</html>
<body text="#f00"></body> text: 设置网页正文中所有文字的颜色
<body bgcolor="#00f"></body> bgcolor:设置网页的背景色
<body background="1.png"></body> background:设置网页的背景图
- 颜色的表示方式:
- 方式一: 用表示颜色的英文单词, 例: red, green, blue
- 方式二: 用16进制表示颜色, 例: #000000, #ffffff, #325687, #377405
- 文件路径
- ./ 表示当前目录下
- ../ 表示父目录
- / 表示根目录
3.2 排版标签
- 可用于实现简单的页面布局
- 注释标签: < !--注释-->
- 换行标签: < br>
- 段落标签: < p>文本文字< /p>
- 特点: 段与段之间有空行
- 属性: align对齐方式(left, center, right)
- 水平线标签: < hr/>
- 属性:
- width: 水平线的长度(两种: 第一种, 像素表示; 第二种, 百分比表示)
- size: 水平线的粗细(像素表示, 例如: 10px, 或者数字表示)
- color: 水平线的颜色
- align: 水平线的对齐方式
- 属性:
<!--换行-->
换<br>行
<!--段落 默认居左-->
<p>段落1</p>
<p align="center">段落2</p>
<p align="right">段落3</p>
<!--水平线 默认居中-->
<hr width="50%" align="left" color="#f00" size="7">
3.3 块标签
- 使用CSS+DIV是目前流行的一种布局方式
- 块标签
- 无论内容有多少, 该标签独占一行
- (p, h1-h6...)
- 行内标签
- 内容撑开宽度, 左右都是行内标签的可以排在一行
- (a, strong, em...)
3.4 基本文字标签
- font标签处理网页中文字的显示方式
<font size="7"></font>用于设置字体的大小, 最小1号, 最大7号
<font color="#f00"></font>用于设置字体的颜色
<font face="宋体"></font>>用于设置字体的样式
3.5 文本格式化标签
- 使用标签实现标签的样式处理
<b>粗体</b>
<br>
<strong>加粗</strong>
<br>
<em>强调字体</em>
<br>
<i>斜体</i>
<br>
<small>小号字体</small>
<br>
<big>大号字体</big>
<br>
5<sup>2</sup>(上标)
<br>
H<sub>2</sub>O(下标)
<br>
<del>删除线</del>
3.6 标题标签
- 随着数字增大字体逐渐变小, 字体是加粗的, 内置字号, 默认占据一行
<h1>h1标题(最大)</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题(最小)</h6>
3.7 列表标签(清单标签)
- 无序列表: 使用一组无序的符号定义, < ul>< /ul>
<!--无序列表
ul: unordered list
-->
无序列表<br>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ul type="circle">
<li>空心圆</li>
</ul>
<ul type="disc">
<li>实心圆</li>
</ul>
<ul type="square">
<li>黑色方块</li>
</ul>
- 有序列表: 使用一组有序的符号定义, < ol>< ol>
<!--有序列表
ol: order list
-->
有序列表<br>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="1">
<li>数字类型</li>
</ol>
<ol type="A">
<li>大写字母类型</li>
</ol>
<ol type="a">
<li>小写字母类型</li>
</ol>
<ol type="I">
<li>大写古罗马</li>
</ol>
<ol type="i">
<li>小写古罗马</li>
</ol>
- 嵌套列表: 无序列表与有序列表相互嵌套使用
<ul>
<li>嵌套列表</li>
<ol>
<li>嵌套列表</li>
</ol>
</ul>
- 自定义列表
<!--自定义列表
dl: definition term
-->
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>python</dd>
<dd>C</dd>
<dd>Linux</dd>
<dt>位置</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
</dl>
3.8 图形标签
- 在页面指定位置处引入一幅图片, < img>
src: 引入图片的地址
alt: 提示信息, 如果图片未能正确显示, 则显示提示信息
title: 鼠标悬停图片上提示的信息
width: 图片的宽度
height: 图片的高度
border: 图片的边框
align: 与图片对齐显示方式
hspace: 在图片左右设定空白
vspace: 在图片的上下设定空白
<p align="center">
前一行<br>
前面的文字<img src="./picture/002.png" alt="text" title="text" width="235" align="top" border="10" vspace="40" hspace="40">后面的文字
<br>后一行
</p>
3.9 链接标签
-
href: 在页面中使用链接标签跳转到另一页面
- 标签: < a href="">< /a>
- 属性: href跳转页面的地址(跳转到外网需要添加协议)
-
target属性: 设置跳转页面时的页面打开方式
- _blank在新窗口打开
- _self在原窗口打开
-
锚链接: 跳转到指定位置
- 定义位置: < a name="名称">< /a>, 使用name作为标记
- 指向: < a href="#名称">< /a>, #+name属性值 跳转到name标记所在位置
-
功能链接:
-
邮件链接: < a href="mailto:邮箱">点击联系我< /a>
-
qq链接: 把跳转链接href中和图片标签src中的qq号换成真实的即可
-
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:qq号:53" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a>
-
-
<font color="red" size="5"><a name="top">顶部</a></font><a href="Demo06.html" target="_blank">跳转到另一个页面</a>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<font color="blue" size="5"><a name="middle">中部</a></font><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<h4><a href="#top">回到顶部</a></h4>
<h4><a href="#middle">回到中部</a></h4>
3.10 表格标签
- 普通表格 (table, tr(行), td(列))
<table border="1" width="200">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</table>
- 表格的列标签(th): 内容有加粗和居中效果
<table border="1" width="200">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</table>
- 表格的列合并属性(colspan): 在同一行内同时合并多个列
<table border="1" width="200">
<tr>
<th colspan="2"></th>
<th></th>
</tr>
</table>
- 表格的行合并属性(rowspan): 在同一列内同时合并多个行
<table border="1" width="200">
<tr>
<th rowspan="2">第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</table>
3.11 媒体标签
<!--音频和视频
音频: audio
视频: video
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="./resource/video/min.mp4" controls autoplay></video>
<audio src="./resource/audio/Empire%20Of%20Angels.mp3" controls autoplay></audio>
3.12 页面结构分析
- header: 标记头部区域的内容(用于页面或页面中的一块区域)
- footer: 标记脚部区域的内容(用于页面或页面中的一块区域)
- section: Web页面中的一块独立区域
- article: 独立的文章内容
- aside: 相关内容或应用(常用于侧边栏)
- nav: 导航类辅助内容
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
四. 综合案例
<!--表格table
行tr
列td
-->
<table border="1">
<tr>
<!--colspan 跨列-->
<th colspan="3">学生成绩</th>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="3">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="3">李四</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>英语</td>
<td>100</td>
</tr>
</table>
五. html表单标签
- html表单用于收集不同类型的用户输入数据
5.1 form元素常用属性
- action表示动作, 值为服务器的地址, 把表单的数据提交到该地址上处理
- method请求方式: get和post
- get:
- 地址栏: 请求参数都在地址后拼接path?name="张三"&password="123456"
- 不安全
- 效率高
- get请求大小有限制, 不同浏览器有不同, 但是大约是2KB; 一般情况用于查询数据
- post:
- 地址栏: 请求参数单独处理
- 安全可靠些
- 效率低
- post请求大小理论上无限; 一般用于插入删除修改等操作
- get:
- enctype: 表示是表单提交的类型
- 默认值: application/x-www-form-urlencoded 普通表单
- multipart/form-data 多部分表单 (一般用于文件上传)
5.2 input元素
- 作为表单中的重要元素, 可根据不同type值呈现为不同状态
<form action="success.html" method="get">
单行文体框: <input type="text" name=""><br>
密码框: <input type="password" name=""><br>
单选按钮: <input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女<br>
多选框: <input type="checkbox" name=""><br>
日期框: <input type="date" name=""><br>
时间框: <input type="time" name=""><br>
日期和时间框: <input type="datetime" name=""><br>
电子邮件输入: <input type="email" name=""><br>
数值输入: <input type="number" name=""><br>
文件上传: <input type="file" name=""><br>
隐藏域: <input type="hidden" name=""><br>
取值范围: <input type="range" name=""><br>
取色按钮: <input type="color" name=""><br>
<hr>
表单提交按钮: <input type="submit" name=""><br>
普通按钮: <input type="button" name="" value="普通"><br>
重置按钮: <input type="reset" name=""><br>
图片提交按钮: <input type="image" src="./picture/002.png" name=""><br>
</form>
5.3 select元素(下拉列表)
- 单选下拉列表: < select>< /select>
- 默认选中属性: selected
<form action="success.html" method="get">
学历:
<select name="edu">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">专科</option>
<option value="5" selected>本科</option>
<option value="6">硕士</option>
</select>
</form>
- 多选下拉列表属性: < select>< /select>
- 多选列表: multiple="multiple"
<form>
<select name="hobby" multiple="multiple" size="2">
<option value="1">编程</option>
<option value="2">音乐</option>
<option value="3">运动</option>
<option value="4">美食</option>
<option value="5">游戏</option>
<option value="6">电影</option>
</select>
</form>
5.4 textarea元素(文本域)
- 多行文本框: < textarea cols="列" rows="行">< /textarea>
<textarea name="ta" cols="10" rows="2">HTML 学习</textarea>
5.5 表单初级验证
- 常用方式
- placeholder: 提示信息
- required: 非空判断
- pattern: 正则表达式 (网址: )
<p>用户:
<input type="text" name="username" placeholder="请输入用户名" required>
</p>
<p>自定义邮箱:
<input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
5.6 综合案例
<h1>注册</h1>
<!--表单form
action: 表单提交的位置, 可以是网站, 也可以是请求处理地址
method: post, get 提交方式
get: 可以在url中看到我们提交的信息, 不安全, 高效
post: 比较安全
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 1. 文本输入框: text
value="用户名" 默认初始值
maxlength="8" 最长写入字符个数
size="30" 文本框长度
readonly 只读
disabled 禁用
hidden 隐藏
-->
<p>用户:
<input type="text" name="username" placeholder="请输入用户名" required>
</p>
<!-- 2. 密码框: password-->
<p>密码:
<input type="password" name="pwd" placeholder="请输入密码">
</p>
<!-- 3. 单选框: radio
value: 单选框的值
name: 表示组
checked: 默认选项
-->
<p>性别:
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>
<!-- 4. 多选框 checkbox
checked: 默认选项
-->
<p>爱好:
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="movie" checked>电影
<input type="checkbox" name="hobby" value="sport">运动
</p>
<!-- 5. 普通按钮 button-->
<p>
<input type="button" name="btn1" value="按钮">
</p>
<!-- 6. 图片按钮 image-->
<p>
<!-- <input type="image" src="./resource/image/001.png">-->
</p>
<!-- 7. 文件域 file-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!-- 8. 下拉框 select
multiple: 多行显示
size: 显示几行
selected: 默认选项
-->
<p>国家:
<select name="country">
<option value="US">美国</option>
<option value="China" selected>中国</option>
<option value="UK">英国</option>
<option value="GM">德国</option>
</select>
</p>
<!-- 9. 文本域 textarea
cols: 列的数量
rows: 行的数量
-->
<p>
<textarea name="textarea" cols="20" rows="5" placeholder="请输入内容"></textarea>
</p>
<!-- 10. 邮件 email-->
<p>邮箱:
<input type="email" name="email" placeholder="请输入邮箱">
</p>
<!-- 11. 网址 url-->
<p>网址:
<input type="url" name="url" placeholder="请输入网址">
</p>
<!-- 12. 数字 number-->
<p>分数:
<input type="number" name="number" max="100" min="0" step="1" placeholder="请输入分数">
</p>
<!-- 13. 滑块 range-->
<p>音量:
<input type="range" name="range" max="100" min="0" step="2">
</p>
<!-- 14. 搜索 search-->
<p>搜索:
<input type="search" name="search" placeholder="请输入要搜索的内容">
</p>
<!-- 15. 增强鼠标可用性-->
<p>
<label for="mark">点我输入留言: </label>
<input type="text" id="mark" placeholder="请输入您的留言">
</p>
<!-- 16. 自定义邮箱
https://c.runoob.com/front-end/854
-->
<p>自定义邮箱:
<input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入正确格式的邮箱">
</p>
<!-- 17. 提交按钮 submit-->
<input type="submit" >
<!-- 18. 重置按钮 reset-->
<input type="reset" value="清空表单">
</form>
六. HTML框架标签
- 通过使用框架, 你可以在同一个浏览器窗口中显示不止一个页面, 每份HTML文档称为一个框架, 并且每个框架都独立于其他的框架
- 使用框架的缺点:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
6.1 框架结构标签frameset
- 框架结构标签: 用于定义如何将窗口分割为框架
- 每个frameset定义了一系列行或列
- rows/columns的值规定了每行或每列占据屏幕的面积
- < frameset rows="">< /frameset>
- < frameset columns="">< /frameset>
6.2 框架标签frame
- 每个frame引入一个html页面
<frameset cols="*,*,*">
<frame src="Demo01.html" />
<frame src="Demo02.html" />
<frameset rows="10%,*">
<frame src="Demo03.html">
<frame src="Demo04.html">
</frameset>
</frameset>
6.3 基本的注意事项
- HTML5不支持frameset标签
- 不能将body标签和frameset标签同时使用
- 假如一个框架有可见边框, 用户可以拖动边框来改变它的大小, 为了避免这种情况发生, 可以在< frame>标签中加入: noresize="noresize"
6.4 iframe(HTML5支持)
<!--iframe
src: 链接地址
name: 框架标识名
w-h: 宽度高度
-->
<iframe src="" name="baidu" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.baidu.com" target="baidu">点击跳转</a>
七. HTML的其他标签和特殊字符
7.1 其他标签
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="descripton" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--href: 引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./style.css">
<!--src: js的文件地址-->
<script type="text/javascript" src=""></script>
7.2 特殊字符
占位符: 空格 空 格
大于号: > >
小于号: < <
版权: 版权信息 ©HTML学习
