HTML5

最新推荐文章于 2022-12-27 16:23:33 发布

chaunceny

最新推荐文章于 2022-12-27 16:23:33 发布

阅读量549

点赞数

分类专栏：前端文章标签： html5 基本标签列表表格表单

本文链接：https://blog.csdn.net/chaunceny/article/details/79933361

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

了解浏览器

1什么是浏览器

安装在电脑上的一个软件

作用：1将页面渲染给用户查看

2是用户和页面交互

主流的浏览器内核

IE trident

chrome webkit/blik

firefox Cecko

safari webkit

opera presto

浏览器兼容问题

2什么是服务器通过浏览器的地址访问的服务器网址就是服务器所在的地址

1.服务器用来存储大量的数据一个超级计算机

2.比家里的电脑配置要搞的多了

3.服务器是24小时不关机的

3访问页面的原理

1挡我们浏览器访问页面的时候，其实是有真实的物理文件传输的，浏览器会将页面上的内容缓存到我们的本地文件

然后在页面渲染出来显示给用户查看

2.平时我们上网感觉第一个登录网站比较缓慢而第二次访问速度快，因为第一次访问的时候，已经将浏览器的信息缓存到了我们的本地文件

3通过发现我们的一个页面其实是由多个文件组成的 .js .jpg .png .html

浏览器的请求数据过程

1.输入网址按下回车，浏览器会更具我们的网址发送报文

2.服务器接收报文，对报文进行处理

3.服务器将处理的结果响应给我们的浏览器

4.浏览器接收到了结果，渲染给用户查看

4什么是URL

URL就是浏览器那一串网址

URL http://192.168.1.100:8080/OneDay/index.html

http:// URL协议

192.168.1.100: 服务器的地址

8080/ 服务器的端口号

OneDay/index.html 访问页面的名称

5什么是HTTP协议

生活中协议：离婚协议.租房协议..... 无论是什么协议都是用来规范/约束某一类事物

规范浏览器与服务器的交流方式

6补充问题

会查看文件的扩展名

基页就是一个 .html 为后缀

什么是纯文本文件？

可以被记事本打开，并且能正常显示的文件

HTML 就是一个文本文件

空格  

小于(<) <

大于(>) >

版权号(© ) ©

注册符(®) ®

认识HTML

1. 什么是HTML？

hipertext超文本 markup标记 language语言

2. html 作用

标记是用来告诉文本的语义的，也就是告诉浏览器那些是标题哪些是段落

注意：HTML的作用只有一个，它是用来给文本添加语义的，并不是改变其样式

【<h1> 的标签作用：

错误的：h1标签是可以修改文字的大小，并且让文字加粗

正确的：h1标签是专门给指定的文字添加语义，并告诉浏览器哪些文字是标题】

3. HTML的发展史

HTML5 支持html1-4的规范也支持XHTML1-1.1的规范

4. 编写第一个html的页面

编写步骤：1.新建文档，修改其后缀.html

2.利用记事本打开

3.编写html代码【html的结构】

4.保存编写的存文本文件

5.利用浏览器打开

Html的基本机构

<html>

<head>

</head>

<body>

显示给用户查看的内容

</body>

</html>

总结：成对出现的

注意首行缩进

Title必须写在head里

5. 字符集问题

在html中文字制定的字符集必须个文件的字符集一致，否则就会出现乱码

<head>

</head>

ISO-8859-1 西方欧洲的字符

GBK（GBK2312）中文汉字和常见的外文

UTF-8 世界上所有的文字【体积大】

企业开发中用哪个呢？【可以通过浏览器自己查看网页编码格式】

如果你的网站仅仅包含中文那么gbk 体积小访问快

如果你的网站中出现了中文以外的字符包含了其他国家的语言 UTF-8 体积大

6. DTD文档什么

因为h5集合了html1-4的版本 XTHML1-1.1的版本

所以编写网页的DTD声明只需要编写H5即可

<!DOCTYPE html> 文档的声明

注意点：1必须写在第一行

2不是一个html标签

3.没有结束标签

4.对大小写不敏感

7. html和html5的区别

1. 都是用来编写网页的

2. Html语法松散容错性强

3. Xhtml更为严格，他对编写的要求很高，必须写闭合标签，熟悉必须加引号…

4. Html5除了语法松散，还增加了许多新特性

8. Html 和htm的差别

在win85/98 后缀名不能大于3位

现在操作系统后缀允许大于3位所以windows下无所谓3或4位

基本标签

1. 注解/注释

格式：

作用：解释一段代码/一个程序方便可读性

注意：1.被注释的内容不会在浏览器中显示

2注释不能作为嵌套

3.注释的快捷键选中ctrl+/

2. 标题标签

格式：<h1></h1>

作用:告诉浏览器哪些文本是标题

注意点：1标题标签只是添加语义，而不是修改其样式

2标题标签h1-6 一共6个

3标题按标签中的内容是独占一行的

4标题标签h1最大h6最小

5在企业开发中<h1> 只能使用一次

3. P标签段落标签

格式：<p> </p>

作用：告诉浏览器这段文字是段落

注意：在浏览器中段落独占一行

4. Br标签水平线标签

格式：<hr>

作用：在页面中显示的水平线

注意点：在浏览器中独占一行的

5. Img标签

格式:<img src="" alt="" title="" height="" width="">

作用:在页面中插入图片

标签属性：src 图片的路径

绝对路径：电脑的物理路径

相对路径：相对自己本页面而言

alt:图片无法显示，指定文字描述

title：鼠标悬浮图片的，提示文字

height:高

width:宽

注意：img标签不是独占一行的

6. Br标签

格式：<br>

作用：换行的

注意点：如果这段描述完了换行使用P标签

如果这段没有描述完想换行使用br标签

多个br可以连续使用的使用多少次就是换多少行

但是在企业中99%的换行都是因为段落的结束而另起段落的 [通过淘宝源代码可查看]

7. a标签

a标签

格式：<a href="" >热点</a>

作用：从一个页面跳转到另一个页面

属性：href：你要跳转的地址

target: 控制新的页面打开模式

_blank新打开一个页面显示 _self覆盖原网页打开【默认值】

注意点：1可以跳转本地页面也可以跳转外网（如 http://www.baidu.com）

2a标签不是独占一行的

3热点可以是图片也可以是文字

4.href必须指定目标地址不然不知道跳转到何处

base标签

格式:<base target="_blank">

作用：统一指定当前页面的超链接打开方式

注意点：必须写在head标签里面

假链接

作用；在开发的时候页面并没有完全写好的情况下避免用户体验差一般做假链接

格式: <a href="#">热点</a>

<ahref="javascript:">热点</a>

两者的区别：1# 会自动回到顶部【淘宝就是这么玩的回到顶部】

2.javascript不会回到顶部

锚链接

作用：跳转到页面中的指定位置

格式：1 <a href="#two">热点</a>

2<p id="two">跳转的位置</p>

注意点：除了能跳转本页面指定的位置，还能跳转别的页面的指定为位置

列表

1什么是列表

作用：给一些数据添加列表语义，告诉浏览器这堆数据是一个整体【列表】

2列表的分类

1.无序列表（用的最多的）

格式:<ul>

.....

</ul>

属性：type

属性值：dise 默认的为实心圆

square 实心方

circle 空心圆

注意点：1对整个无序列表添加样式点必须写在ul标签里面

2独占一行的

3列表标签是可以嵌套的

应用场景：1.商品列表的展示。

2.新闻的列表

3.导航条

快捷键：ul>li*n 一个ul下面有n个li

ctrl+d 复制当前行

2.有序列表（用的比较少）

格式：<ol>

.....

</ol>

属性：type

取值：1 默认的以数字排序

a/A 以英文的大小写排序

i/I 以罗马文数字的大小写排序

应用场景：同上

3自定义列表

格式：<dl>

.......

.......

</dl>

应用场景：图文混排

表格

1什么是表格

表格是一种数据的呈现形式，当数据量比较大的时候，表格的展现会让数据更加的清晰

2.什么是表格标签

用来给一堆数据添加表格的语义

3.格式：<table> 表格

<tr> 行

<td></td><td></td><td></td>.... 列内容写在td里面

</tr>

<tr>

<td></td><td></td><td></td>....

</tr>

</table>

4.表格中的属性

border:表格中的边框默认情况下0 取值代表边框的粗细

cellspacing 单元格与单元格之间的间距默认为2个像素的

cellspadding 单元格与内容之间的距离默认1个像素

width: 表格的宽度默认情况下为内容的宽度

height:表格的高度默认情况下为内容的高度

align: 水平对齐的方式： lest center right 默认left

在table中设置表格在浏览器中为居左居中居右

在tr中设置当前行的内容在浏览器中居左居中居右

在td中设置当前列【当前单元格】的内容在浏览器中居左居中居右

valign 垂直对齐方式： top middle bottom

在table中设置无效

在tr中设置当前行的内容在浏览器中居上居中居下

在td中设置当前列【当前单元格】的内容在浏览器中居上居中居下

bgcolor 设置表格的背景颜色

在table中设置为整个表格添加背景颜色

在tr中设置为当前行添加背景

在td中设置为当前列【当前单元格】添加背景

th（推荐不使用）

作用：给表格中的文字加粗居中

注意表格是独占一行的

5.表格的结构

作用：由于表格中存储的数据比较复杂（标题头主体尾巴）为了方便管理和阅读，

我们必须要提升表格的语义，我们可以吧表格分为4类

结构：<table>

<caption>表格的标题</caption>

<thead>

</thead>

<tbody>

......

</tbody>

<tfoot>

</tfoot>

</table>

caption 指定表格的标题

thead 指定表格的头

tbody 指定表格的主体

tfoot 指定表格的附加信息

6.合并单元格

格式：合并行 rowspan="n" n代表合并几行

合并列 colspan="n" n代表合并几列

注意点写在td里面

表单

1.什么是表单？

表单就是用来收集用户填写的信息

2.什么是表单元素

什么是元素？

a:a标签 a标记 a元素

元素就是一种新的说法而已

组成表单标签的元素

表单元素

格式：<form>

表单元素

</form>

快捷键 input:type的值 tab

属性：value 输入框的默认值

注意：表单元素不是独占一行的

1文本框：

格式:<inputtype="text">

提高用户输入的体验

1.给输入框添加id属性并赋值

2.把文字放入label标签

3.将label中添加for属性并赋值值=id的值

2密码框：

格式：<inputtype="password">

3单选按钮

格式：<inputtype="radio">男

注意：想要实现单选表单radio的name属性值必须相同

如何默认选择一个radio checked="checked"

4文件元素：<input type="file">

5多选按钮

格式：<inputtype="checkbox">读书

注意：实现默认选中添加 checked属性

6按钮

（1）普通按钮：格式<inputtype="button" value="我是普通按钮">

注意：value 给按钮赋值【按钮的显示文字】

普通按钮结合js使用的

（2）重置按钮：格式：<inputtype="reset" value="重置">

（3）提交按钮：格式：<inputtype="submit" value="提交">

作用：把用户的输入信息提交到后台

注意点：提交到那里去？ form里 action指定提交地址

数据是如何过去的 name属性以键值对的形式传输的

数据的提交方式是什么？ form里 method常见的两大提交方式get/post安全的

（4）隐藏域：格式：<inputtype="hidden" name="" value="999">

3. datalist标签

作用：给输入框绑定一些选项，让用户获得更多的选择

注意：1.写一个输入框<input type="text" >

2.写一个datalist列表注意value值必须填写

<option value="我为什么这么帅">我为什么这么帅</option>

<option value="我为什么这么丑">我为什么这么丑</option>

<option value="我为什么这么傻">我为什么这么傻</option>

<option value="我为什么这么笨">我为什么这么笨</option>

</datalist>

3给datalist添加id属性并赋值

<option value="我为什么这么帅">我为什么这么帅</option>

<option value="我为什么这么丑">我为什么这么丑</option>

<option value="我为什么这么傻">我为什么这么傻</option>

<option value="我为什么这么笨">我为什么这么笨</option>

</datalist>

4.给输入框添加属性list并赋值值=id的值

4.非input标签

1.下拉框

格式：<select>

......

</select>

注意：下拉框不能输入内容

添加selected默认选择该内容 selected="selected"

2.文本域

格式：<textarea>

文本

</textarea>

z注意：默认情况下可以无限换行

默认情况下输入框有自己的宽和高

可以通过rows/cols来设置文本域的宽/高

文本域的宽高可以拉伸（之后学习ＣＳＳ可控制其不被拉伸）

5.html5新增的输入类型标签

邮箱:<inputtype="email"><br>

作用：自动验证输入框的内容，是否符合邮箱格式

域名:<inputtype="url"><br>

作用：自动验证输入的URL是否正确

电话:<input type="number"><br>

作用：输入框值允许输入数字

时间:<inputtype="date"><br>

作用：通过时间器来选择时间

颜色:<inputtype="color"><br>

作用：通过取色板来选取颜色

多媒体

1.video标签 h5

作用：播放视频

格式：<videosrc=""></video>

属性：src 指定视屏的地址绝对/相对

autoplay 是否自动播放 [autoplay="autoplay"]

controls 是否显示控制条 [controls="controls"]

poster 当视频未播放时所显示的占位图片

loop 循环播放当前视频 [loop="loop"] 一般用于广告

preload 预加载当前视屏不能和autoplay一起使用设置了autoplay，preload失效

muted 静音 [muted="muted"]

video 标签的第二种编写格式：

格式：<video>

</video>

注意：所使用的浏览器必须支持H5的标签

2. audio

作用：播放音频

格式：<audiosrc=""></audio>

属性：src 指定音频的地址绝对/相对

autoplay 是否自动播放 [autoplay="autoplay"]

controls 是否显示控制条 [controls="controls"]

loop 循环播放当前音频 [loop="loop"]

preload 预加载当前音频不能和autoplay一起使用设置了autoplay，preload失效

muted 静音 [muted="muted"]

audio的第二种编写格式

格式：<audio>

<sourcesrc="Xxx.mp3" type="audio/mp3">

<sourcesrc="Xxx.ogg" type="audio/ogg">

<sourcesrc="Xxx.wav" type="audio/wav">

</audio>

3. 详情概要

作用：利用summary标签描述概要信息利用datails标签描述详情信息

格式：<details>

详情

</details>

注意：默认情况为折叠

4. marquee

作用：跑马灯

属性：direction 设置其滚动的方向 left/right/up/down 默认left

scrollamount 值越大越快

loop 设置跑几次默认-1 无限跑

behavior 设置跑的类型

值：slide 跑到边缘停止

alternate 跑到边缘弹回

默认值循环跑

5. H5中一些被废除和新增的标签

1.被废除的

1.br

2.hr

3.font 字体

4.b 加粗

5.i 倾斜

6.u 字体下划线

7.s 删除线

2.新增的标签

1.strong 语义：定义重要性强调的文字

2.ins 语义：插入的文字

3.em 语义：定义强调的文字

4.del 语义：定义被删除的文字

6. 字符实体

作用：在html中字符具有特殊的含义，不能被显示。通过字符实体可以显示

哪些字符实体：空格  

小于号＜ <

大于号＞ >

引号 " "

版权符号 © ©

注册号 ® ®

chaunceny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录