目录
一、HTML是什么?
一种超文本标记语言,(HyperText Markup Language,简称:HTML),是一种通过超链接将不同的文字、图片等信息结合在一起,并对其进行一些处理和修改。每个网页都是一个 HTML 文档,使用浏览器访问一个链接(URL),实际上就是下载、解析和显示 HTML 文档的过程。
什么是标记语言和脚本语言?
标记语言:是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。它不能编程,只能用来标记网页中的内容,通过不同的标签实现对应的功能。
脚本语言:是为了缩短编程语言的“编写、编译、链接、运行”等过程而创建的计算机编程语言。是一种用来解释某些东西的语言,又被称为扩建的语言,或者动态语言,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译。
具体详解可以看这个博主的文章:什么是脚本,脚本语言?-CSDN博客
标记语言中,可以边编译边执行,会执行到报错的语句才停止,而脚本语言中,必须全部显性错误都解决完(编译器提示错误),才能开始执行。
二、ul、ol、li标签
ol和ul可以包含li,ul是一个无序列表,ol是有序列表
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ul的效果示例</h1>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>橙子</li>
</ul>
<h1>ol效果示例</h1>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>橙子</li>
</ol>
<h1>单一的li效果</h1>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>橙子</li>
</body>
</html>
示例结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- li 的嵌套效果 -->
<ul>
<li>苹果
<ul>
<li>香蕉</li>
<li>桃子</li>
</ul>
</li>
<li>橙子</li>
<li>橘子</li>
</ul>
</body>
</html>
1、无序标签ul
<ul type="">无序标签
属性type可以为disc(实心圆)、circle(空心圆)、square(实心正方形)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表ul的type属性 -->
<ul type="disc">
<li>苹果</li>
</ul>
<ul type="circle">
<li>香蕉</li>
</ul>
<ul type="square">
<li>橘子</li>
</ul>
</body>
</html>
2、有序标签
如果在<ol start="50">,则可以控制开始的数字为50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表ol标签的start属性 -->
<ol start="50">
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>橙子</li>
</ol>
</body>
</html>
三、表格类标签
表格 | table标签 属性:width(设置表格宽度)、height(设置表格最小高度)、cellspacing(单元格之间的距离)、 border(设置表格边框宽度) 例如:cellspacing="0" |
表标题 | caption标签 |
表头 | thead标签 使用<tr>代表行,th代表单元格 属性:height,width不能用 align设置文字的位置 ,例:align="center"居中 另外还有left(左对齐)、center(中间对齐)、right(右对齐) valign设置水平位置,例:valign="middle"水平居中 还有bottom(底部)、top(顶部) |
表内容 | tbody标签 使用<tr>代表,不要与表头弄混了,td代表单元格;属性与thread相同 rowspan:指定要跨的行数 colspan:指定要跨的列数 |
表脚注 | tfoot标签 |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格 -->
<table border="10" style="text-align: center;">
<!-- 表标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<!-- 表格结尾 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td>总人数:2</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
注意,border属性设置的边框值,如果大于1,则只会对外边距进行加粗,内边框不会,如下设置为10
四、from表单
属性 | 作用 |
action | 提交到的网址 |
target | 是否另外打开一个网页 _blank:新打开一个。在新的未命名的浏览上下文中加载。 _parent:在当前上下文的父级浏览上下文中加载,如果没有父级,则与 _self 表现一致。 _self:在当前打开 _top:在最顶级的浏览上下文中(即当前上下文的一个没有父级的祖先浏览上下文),如果没有父级,则与 _self 表现一致。 |
method |
|
示例代码:_blank是另一个页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="https://www.baidu.com" target="_blank" method="">
<div>
请输入你的用户名:<input type="text"><br>
请输入你的密码:<input type="password">
</div>
<button>提交</button>
</form>
</body>
</html>
五、input标签
属性 | 解释说明 | 浏览器效果 |
text | 单行文本框 | |
password | 密码文本框 | |
radio | 单选框 | |
checkbox | 多选框 | |
button、submit、reset | 按钮 | |
file | 文件上传 | |
hidden | 定义隐藏的输入字段。(可以反爬虫的一种) | |
checked | 默认单选值 | |
六、其他类标签
1、a标签
a标签,以下划线为标记的跳转
<a href="网址/锚点"></a>
属性:target,何处打开超链接 _blank:通常在新标签页打开,但用户可以通过配置选择在新窗口打开。 _parent:当前浏览环境的父级浏览上下文。如果没有父级框架,行为与 _self :当前页面加载。(默认) _top:最顶级的浏览上下文(当前浏览上下文中最“高”的祖先)。如果没有祖先,行为与 |
示例:
<a>标签的细节(注释)
对本地路径的跳转(尚硅谷课程截图)
其他引用跳转示例
电话tel:
邮箱mailto:
短信sms:
2、br标签
br标签表示换行符
3、hr标签
hr标签表示换行符。
4、pre标签
<pre>标签表示预定义格式文本。元素在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
示例代码:
5、select标签 - option
option属性 | 作用 |
selected | 默认下拉框的初始值 |
value | 提交的值 |
6、disabled 禁用标志
disabled 禁止输入,元素不可变、不能聚焦或与表单一同提交
例如input标签和button标签:
option标签:
7、label标签
属性 | 作用 |
label | 标注后,当点击那个位置,会有光标在闪烁 |
使用方式:方法一中,绑定的是id
8、fieldset标签
作用:弄一个外文本框
用法
<fieldset>
<legend>主要信息</legend>
</fieldset>
9、iframe标签
作用:设置一个弹窗,可以链接外部网站,或者使用本地的图片、视频等
属性 | 作用 |
src | 链接到其他的网站、地址等 |
frameborder | 是否设置边框,0代表无边框,1代表设置边框 |
width、height | 设置宽高 |
示例:
10、实体字符总结
其他字符实体的官方列表:HTML Standard (whatwg.org)
11、abbr标签
以下划虚线为标记的解释性文本。
示例:
12、address标签
就是简单标记定义文档的作者的标签,通常和其他元素被包含在footer元素.
示例:
13、area标签
与map标签同用,可以对所在图像设置一个可以跳转的位置,即点击图片所在的位置也可以实现跳转功能。
示例
14、常用的全局属性
15、常见的图片格式
jpg特点是占用空间小,但会有损图片像素,png是无损的,但占用空间更高。
内存占用(从小到大):jpg<png<bmp
清晰度(从大到小):bmp>png>jpg
七、HTML5概述
1、什么是HTML5?
HTML5是新一代的HTML标准,由2014年10月由万维网联盟(W3C)完成标准制定。
2、HTML5的优势
针对JavaScript,新增了很多可操作的接口;
新增了一些语义标签、全局属性;
新增了多媒体标签,可以很好的替代flash;
更加侧重语义化,对于SEO更友好;
可移植性好,可以大量应用在移动设备上;
3、HTML5兼容性
支持Chrome、Safari、Opera、Firefox等主流浏览器
IE浏览器必须是9及以上版本才支持HTML5,且IE9仅支持部分HTML5的标签
八、H5新增标签
1、新增布局标签
<header> | 整个页面或部分区域的头部 |
<footer> | 整个页面或部分区域的底部 |
<nav> | 导航 |
<article> | 文章、帖子、杂志、新闻、博客等,里面包含<section>标签,article是一整个文章,<section>是里面的一段内容。 |
<section> | 页面中的某段文字或文章中的某段文字(里面文字通常里面包含标题),一般都用div较多 |
<aside> | 侧边栏 |
一般这些标签都表示语义化的意思,标签本身没有什么特别的作用。
2、新增状态标签和属性
<meter>标签,显示进度条
属性 | 作用 |
high | 规定最高值 |
low | 规定最低值 |
max | 规定最大值 |
min | 规定最小值 |
optimum | 规定最优值 |
value | 规定当前值 |
<progress>标签,显示进度条
属性 | 作用 |
max | 规定目标值 |
value | 规定当前值 |
3、新增列表标签
<datalist>标签,与option连用
点击文本框出现提示
输入文字进行搜索
类似百度的搜索
标签<details>
要与<summary>连用
点击后
4、新增文本标签
标签名 | 语义 |
ruby | 包裹需要注意的文字 |
rt | 写注意,rt标签写在ruby标签里面 |
效果展示
5、新增表单控件属性
属性 | 作用 |
placeholder,占位符 | |
required,必须填写 | |
autofocus,文本框聚焦 | |
autocomplete="on",是否保存历史记录,需要打开浏览器的保存地址的设置 | |
pattern="正则表达式" | 示例:"\w{8}",必须填写8位 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- placeholder占位符 -->
账号:<input type="text" required><br>
<!-- required必填 -->
密码:<input type="password" placeholder="请输入密码" ><br>
<!-- autofocus -->
文本聚焦测试:<input type="text" autofocus><br>
<!-- pattern正则表达式 -->
正则表达式测试:<input type="text" pattern="\w{8}"><br>
<!-- autocomplete保存历史记录 -->
保存历史记录:<input type="text" autocomplete="on"><br>
<button>提交</button>
</body>
</html>
什么是正则表达式?
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。
引用☞【正则表达式】详解及常用的使用方法详解_正则表达式的使用-CSDN博客
6、input新增type属性值
属性名 | 作用 |
type="email" | 填写邮箱,可以判断是否是邮箱格式 |
type="url" | 填写网址 |
type="number" | 填写数值,可以搭step使用调整步长 |
type="search" | 搜索框,侧重语义化 |
type="tel" | 在手机端会如下图显示,只能输入数字 |
type="range" | 设置滑动条 |
type="color" | 自主调整颜色 |
type="date" | 设置日期,年月日 |
type="month" | 设置月份,只能是年月 |
type="week" | 选择周数,选择每一年的第几周 |
type="time" | 设置时间 |
type="datetime-local" | 设置当前的时间 |
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input新增属性值</title>
</head>
<body>
<form action="#">
邮箱:<input type="email"><br>
数值(步长2):<input type="number" name="数值" step="2"><br>
搜索:<input type="search" name="search"><br>
滑动条:<input type="range" max="80" min="0"><br>
颜色设置:<input type="color" name="颜色"><br>
年月日:<input type="date" name="日期"><br>
年月:<input type="month"><br>
周数:<input type="week"><br>
时间:<input type="time"><br>
当前时间:<input type="datetime-local" name="当前时间"><br>
<button>提交</button>
</form>
</body>
</html>
7、视频标签
属性 | 作用 |
controls | 视频的基础模块,声音、播放、全屏等 |
muted | 视频默认静音 |
autoplay | 自动播放,前提是视频必须是默认静音,与,muted连用,否则不会自动播放 |
loop | 自动循环播放 |
poster="图片路径" | 设置视频的封面 |
preload="none",不进行预加载。 metadata,加载一部分内容 auto,根据浏览器启动缓存 | 预加载,还有另外两个属性 |
只有标签示例:
无法播放
添加属性示例:
8、音频标签
效果类似如上视频标签
属性 | 作用 |
controls | 音频播放、静音等功能模块 |
muted | 静音播放 |
loop | 循环播放 |
preload="none",不进行预加载。 metadata,加载一部分内容 auto,根据浏览器启动缓存 | 预加载 |
9、新增全局属性
属性名 | 功能 |
contenteditable | 表示元素是否可以编辑 true:可编辑 false:不可编辑 |
draggable | 表示元素可以被拖动 true:可拖动 fasle:不可拖动 |
hidden | 隐藏元素 |
spellcheck | 规定是否对元素进行拼写和语法检查 true:检查 false:不检查 在浏览器时需要打开浏览器的拼写检查功能 |
contextmenu | 规定元素的上下文菜单,在用户鼠标右键点击元素时显示 |
data-* | 用于存储页面的私有定制数据 |
部分示例:
效果示例,添加文字“I Love You.”
注:部分引用了尚硅谷视频内容和其他博主文章