HTML基础详细笔记

lv_maogui

已于 2023-01-10 17:32:28 修改

阅读量497

点赞数

分类专栏： html 文章标签： html

于 2020-10-26 21:25:46 首次发布

本文链接：https://blog.csdn.net/lv_maogui/article/details/109298992

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML笔记

1.1 HTML 的基本语法

文档声明
<!doctype html>

注释
<!-- 注释的内容  -->
标签（元素）
	标签的语义、功能
	标签的属性
	单标签还是双标签

1.2 HTML 常用标签

主体结构标签：
	html	页面的根标签	双
	head	页面头部	双
	body	页面主体，需要显示在页面上内容都写在body中	双
	
HEAD 标签
	title	页面的标题	双标签
	meta	设置页面的元信息	单标签
			属性： name content http-equive charset
			功能：
			① 设置字符集编码
			<meta charset="utf-8">
			② 设置关键字和描述信息 用于SEO
			<meta name="keywords" content="">
			<meta name="description" content="">
			③ 设置页面跳转
			<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
			
	link	设置引用的外部资源与本文件的关系	单标签
			属性：rel href
			
			功能：设置标题的图标
			<link rel="shortcut icon" href="">
			
格式排版标签
	h1~h6 标题标签 双标签
	p	段落	双标签
	hr  分割线	单标签
	br	换行标签	单标签
	pre	文本原格式输出	双标签
	div	用于页面布局	双标签
		
文本标签
	em	表示强调，默认表现为斜体	双
	strong	表示强调（更强烈一点），默认表现为粗体 双
	del	表示删除的文本内容	双标签
	ins	表示新添加的文本内容	双标签
	sub	下标字	双标签
	sup 上标字	双标签

2 绝对路径和相对路径

2.1 绝对路径

一个完整的网址

http://www.baidu.com
https://xhpfmapi.zhongguowangshi.com/vh512/share/9394960

2.2 相对路径

① 目标文件与当前文件同级

目标文件名
./目标文件名

② 目标文件在当前文件的下级目录

与当前文件同级的文件夹/目标文件名
./与当前文件同级的文件夹/目标文件名

③ 目标文件在当前文件的上级目录

../   表示上一级目录
../../  表示上一级目录的上一级目录

3 超链接和锚点

3.1 相关的标签

标签名	语义和功能	属性	单标签还是双标签
a	超链接	href 属性：指定目标地址 target 属性：指定目标文件在哪里打开值 `_self`(默认)、`_blank` name 属性：用于设置锚点名	双
base	指定超链接的基础特性写在 head 标签的里面	href 属性：设置超链接的基础地址（影响相对路径） target 属性：指定目标文件在哪里打开值 `_self`(默认)、`_blank`	单

3.2 超链接的功能

① 目标地址

通过 href 属性指向目标地址，目标地址是以文件的地址
点击超链接，浏览器就会打开目标地址指向的文件
如果目标地址指向的文件的格式浏览器打不开，执行下载

② 超链接特殊用法

<a href="tel:10086">打电话</a>
<a href="sms:10086">发短信</a>

③ 指定目标文件打开的位置

把 target 属性的值设置为 _blank, 目标文件会在新窗口打开
target 属性的默认值是 _self

3.3 锚点

① 在页面中设置锚点

第一种方式 使用 a 标签
	<a name="锚点名"> </a>
	
第二种方式 给标签设置 id 属性
	<div id="锚点名"></div>

② 跳转到锚点

跳转到锚点，还是需要超链接，不跳转到新页面，跳转到当前页面的锚点位置

<a href="#锚点名">指定锚点</a>
<a herf="#">返回定位</a>

注意：

不但可以跳转到本页面某个锚点 <a href="#锚点名">

还可以跳转到其他页面的某个锚点 <a href="页面地址#锚点名">

4 图片

4.1 相关标签

标签名	语义和功能	属性	单标签还是双标签
img	图片	src 属性：指定图片的地址 alt 属性：指定图片的说明文字，如果图片无法正常加载，改文字显示 usemap 属性：指定与该图像对应的map标签的 name 值	单
map	用于图像映射	name 属性：指定一个名字，用于与 img 标签关联	双
area	用于图像映射划分区域必须写在 map 标签的里面	shap 属性：指定区域的形状，可选值：rect、circle、poly coords 属性：根据区域的形状不同，执行不同的坐标 href 属性：指定目标地址 target 属性：指定在什么位置打开新的页面	单

4.2 在页面中引入图像

<img src="../02-超链接/anni.jpg" alt="安妮" title="你好安妮" height="300">

4.3 图片与超链接配合使用

<a href="http://www.baidu.com">
    <img src="images/anni.jpg" alt="安妮" height="200">
</a>

<a href="http://www.taobao.com">
    <img src="images/铭哥.jpg" alt="铭哥" height="200">
</a>

4.4 图像映射

<img src="images/浏览器.jpg" alt="浏览器" usemap="#mymap">

<map name="mymap">
    <area shape="circle" coords="130,114,100" href="https://www.google.cn/chrome/" target="_blank" title="chrome浏览器">
    <area shape="rect" coords="265,27,491,159" href="http://www.firefox.com.cn/" target="_blank" title="firefox浏览器">
    <area shape="poly" coords="138,349,248,157,374,346" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank" title="IE浏览器">
</map>

5 列表标签

5.1 无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

<ul>
    <li>
        江苏
        <ul>
            <li>南京</li>
            <li>苏州</li>
            <li>无锡</li>
            <li>徐州</li>
        </ul>
    </li>
    <li>
        浙江
        <ul>
            <li>杭州</li>
            <li>宁波</li>
            <li>绍兴</li>
            <li>湖州</li>
        </ul>
    </li>
    <li>安徽</li>
    <li>江西</li>
</ul>

注意：

无序列表在页面中非常常用，如导航、新闻列表、商品列表等

一组具有相关性的内容放在一起，一般选择使用无序列表

5.2 有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
</ol>

注意：

使用有序列表的场景：最热新闻排名，音乐排行等

5.3 定义列表

<h2>商品分类</h2>
<dl>
    <dt>家用电器</dt>
    <dd>电视</dd>
    <dd>空调</dd>
    <dd>洗衣机</dd>
    <dd>电冰箱</dd>

    <dt>电脑/办公</dt>
    <dd>电脑整机</dd>
    <dd>电脑配件</dd>
    <dd>外部设备</dd>
</dl>

5.4 列表标签总结

标签名	语义和功能	单标签还是双标签
ul	无序列表	双
ol	有序列表	双
li	列表项需要嵌套在 ul 或者 ol 的里面	双
dl	定义列表	双
dt	定义列表项的标题	双
dd	定义列表项的描述	双

6 表格

6.1 table 标签

6.2 表格标题

使用 caption 标签， caption 标签内还可以在嵌套 h 标签

6.3 表格的结构组成

table
	thead	表头
		tr		行
			th		表头单元格
	tbody	表格主体
		tr		行
			td		普通单元格
	tfoot	表格注脚

6.4 设置单元格宽高

给 td 或 th 设置宽度，同列的单元格都会按照设置的宽度， 其实是设置列宽
给 td 或 th 设置高度，同行的单元格都会按照设置的高度， 其实设置行高

也可以给 tr 设置高度，设置的是行高

6.5 跨行和跨列

用于定义特殊格式的表格

给 td 或者 th 设置 colspan 用于跨列

给 td 或者 th 设置 rowspan 用于跨行

6.6 表格标签总结

标签名	语义和功能	属性	单标签还是双标签
table	表格	width 属性：设置表格宽度。 heihgt 属性：设置表格高度。 border 属性：设置表格边框的宽度，默认值是 0 cellspacing 属性：设置单元格之间的间距 cellpadding 属性：设置单元格边框与内容的间距	双
thead	表头	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle	双
tbody	表格主体	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle	双
tfoot	表格注脚	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle	双
tr	行	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle height 属性：设置行的高度	双
th	表头单元格写在 tr 的里面	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle width 属性：设置列的宽度（单元格所在的列） height 属性：设置行的高度（单元格所在的行） colspan 属性：指定跨越的列数，默认是 1。 rowspan 属性：指定跨越的行数，默认是 1	双
td	普通单元格写在 tr 的里面	align 属性：设置单元格内内容的水平对齐方式,值 left right center valign 属性：设置单元格内内容的垂直对齐方式，值 top bottom middle width 属性：设置列的宽度（单元格所在的列） height 属性：设置行的高度（单元格所在的行） colspan 属性：指定跨越的列数，默认是 1。 rowspan 属性：指定跨越的行数，默认是 1	双
caption	表格的标题		双

7 表单

7.1 form 标签

form 标签是表单的包裹元素，表单中所有的东西都要写在 form 标签的里面
具有如下属性：
	action   指定要提交的地址
	method   指定提交方式
	target   指定新打开的页面在哪个窗口打开

7.2 表单控件

① 文本输入框

<input type="text">

属性：
	type 设置为 text
	name 属性指定名字（向后端提交数据的时候使用）
	value 属性指定默认的值
	maxlength  指定输入框最大可输入的长度

② 密码输入框

<input type="password">

属性：
	type 设置为 password
	name 属性指定名字（向后端提交数据的时候使用）
	value 属性指定默认的值
	maxlength  指定输入框最大可输入的长度

③ 单选按钮

<input type="radio">

属性：
	type 设置为 radio
	name 属性指定名字，多个单选按钮要实现单选的效果，它们的name属性值要一致 （向后端提交数据的时候使用）
	value 属性指定真正向后端提交的数据
	checked 属性，设置默认选中，使用的时候，不需要给值

④ 复选框

<input type="checkbox">

属性：
	type 设置为 checkbox
	name 属性指定名字（向后端提交数据的时候使用）
	value 属性指定真正向后端提交的数据
	checked 属性，设置默认选中，使用的时候，不需要给值

⑤ 隐藏域

<input type="hidden"> 用于向后端提交隐藏信息

属性：
	type 设置为 hidden
	name 属性指定名字（向后端提交数据的时候使用）
	value 属性指定向后端提交的数据

⑥ 提交按钮

<input type="submit" value="提交">
	属性：
        type 设置为 submit
        value 设置按钮上的文字
	
或者
<button>按钮上的文字</button>

或者
<button type="submit">按钮上的文字</button>

⑦ 重置按钮

<input type="reset" value="重置">
    属性：
        type 设置为 reset
        value 设置按钮上的文字
        
 
或者
<button type="reset">按钮上的文字</button>

⑧ 普通按钮

<input type="button" value="按钮">
普通按钮没有任何功能，只有按钮的样子
    属性：
        type 设置为 button
        value 设置按钮上的文字
        
        
或者
<button type="button">按钮上的文字</button>

⑨ 文本域

<textarea> </textarea>

属性：
	name 属性指定名字（向后端提交数据的时候使用）
	rows 指定默认显示的行数，影响到文本域的高度
	cols 指定默认显示的列数，影响的文本域的宽度

⑩ 下拉选项

<select name="">
	<option value="">选项文字</option>
	<option value="">选项文字</option>
	<option value="">选项文字</option>
	<option value="">选项文字</option>
	<option value="">选项文字</option>
</select>

select 的属性：
	name  属性指定名字（向后端提交数据的时候使用）
	
option 的属性：
	value 指定真正向后端提交的数据
	selected  设置默认选项 （不用给值）

7.3 label 标签

label 标签用于与表单控件做关联， label 中通产包含表单控件的说明文字

好处：① 有利于 SEO，让文字与表单控件关联了 ② 点击与表单控件关联的文字可以让表单控件获取焦点

用法：

<!--用于 文本输入框、密码输入框、文本域、下拉选项-->
<label for="username">用户名：</label>
<input type="text" id="username">


<!--用于单选按钮 或者 复选项-->
<label>
    <input type="radio"> 文字
</label>
<label>
    <input type="radio"> 文字
</label>

7.4 fieldset 和 legend 标签

fieldset 可以在表单控件的周围加一个边框

legend 指定表单的标题，出现在边框的上面

<form>
	<fieldset>
        <legend>表单标题</legend>
       	表单控件...
    </fieldset>
</form>

7.5 disabled 属性

所有的表单控件，都可以设置属性 disabled，设置该属性，表单控件就变为不可用的状态

7.6 表单标签的总结

标签名	语义和功能	属性	单标签还是双标签
form	表单	action 属性：指定要提交的地址 method 属性：指定提交的方式，默认值是 GET target 属性：指定提交的地址在哪个窗口打开	双
input	定义各种形式的表单控件	type 属性：指定表单控件的类型，可选的值： `text` `password`、 `checkbox` `radio` `hidden` `submit` `reset` `button` name 属性：指定表单控件的名字，用于向后端提交数据 value 属性：指定值，用于文本框和密码框可以指定默认值，如果用于单选按钮和复选框用来指定真正向后端提交的数据，如果用于按钮指定按钮的文字 maxlength 属性：指定最大可输入的文字个数，用于文本框和密码框 checked 属性：设置为默认选项，用于单选按钮和复选框 disabled 属性：设置表单控件不可用	单
textarea	文本域，多行文本输入	name 属性：指定名字，用于后端提交 disabled 属性：设置表单控件不可用 rows 属性：指定默认显示的行数，会影响文本域的高度 cols 属性：指定默认显示的列数，会影响文本域的宽度	双
select	下拉选项框	name 属性：指定名字，用于后端提交	双
option	下拉选项，写在 select 标签的里面	value 属性：指定真正向后端提交的地址 selected 属性：指定为默认的选项 disabled 属性：设置表单控件不可用	双
button	按钮	type 属性：指定按钮类型，可选值 submit(默认)、reset、button	双
label	关联一个表单控件	for 属性：指定要关联的表单控件的 id 属性的值	双
fieldset	表格边框		双
legend	表格标题		双

8 框架标签

标签名	功能和语义	属性	单标签还是双标签
iframe	框架标签	name 属性：指定框架的名字，可以与超链接的target属性配合 width 属性：设置框架的宽度 height 属性：设置框架的高度 frameborder 属性：设置有无边框，值是0或者1 scr 属性：目标文件的地址	双标签

9 HTML 实体

空格	&nbsp;
<    &lt;
>    &gt;
&    &amp;
¥    &yen;
©    &copy;
×    &times;
÷    &divide;

10 HTML 的全局属性

所有的 html 标签都具有的属性

class	给元素设置类名
id		给元素设置id名，元素的id名不能重复的
style	用于设置 css 样式
dir		设置文字的方向 值 ltr  rtl
title	设置一个文字提示，超链接和图片用得不较多
lang	设置内容的语言

2 html5新增标签

2.1 新增的结构化语义标签

标签名	语义和功能	单标签还是双标签
header	页面头部	双
footer	页面页脚	双
nav	导航	双
article	文章	双
aside	侧边栏	双
section	页面中的一小节或文章中一小段

2.2 状态标签

meter 和 progress 什么区别？

答：meter 表示度量，是静态的，用于表示温度、容量、电量。

progress 表示过程，完成度，用于进度条。

2.3 新增列表标签

标签名	语义和功能	单标签还是双标签
datalist	用于搜索框的提示	双
details	表示详细内容	双
summary	表示详细内容的标题	双

① datalist 的用法

datalist 的 id 属性值与关联的 input 的 list 属性值一致， datalist 内要包含 option 元素。

<input type="text" list="myDataList">
<datalist id="myDataList">
    <option value="aa"></option>
    <option value="ab"></option>
    <option value="abc"></option>
    <option value="abb"></option>
    <option value="abcd"></option>
    <option value="aaa123"></option>
    <option value="abbb"></option>
    <option value="bbb"></option>
    <option value="biubiubiu"></option>
</datalist>

② details 的用法

<details>
    <summary>今天是什么日子？</summary> 
    <p>
    今天是个伟大的日子，Lorem ipsum dolor sit amet.
    </p>
</details>

2.4 注释标签

标签名	功能和语义	属性	单标签还是双标签
ruby	文字注音		双
rt	注音，写在 ruby 的里面		双

<ruby>
    魑
    <rt>chi</rt> 
</ruby>
<ruby>
    魅
    <rt>mei</rt> 
</ruby>

<ruby>
    魑魅魍魉
    <rt>chimeiwangliang</rt>
</ruby>

2.5 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	表示标体，W3C建议用于搜索结果中标记关键字		双

2.6 新增图像标签（了解）

标签名	语义和功能	属性	单标签还是双标签
figure	独立的流内容，用于文章中的插图		双
figcaption	写在 figure 的里面，表示标题		双

3 HTML5 表单新增功能

3.1 表单控件新增属性

placeholder： 输入提示文字

required： 表示必填

autofocus： 自动获取焦点

autocomplete： 设置是否显示输入框之前的输入历史记录，值： on 或者 off

3.2 input 的 type 属性新增的值

① 文本输入框

email：
	规定填写邮箱
	在提交的时候会进行验证是否是邮箱

url:
	规定填写网址
	在提交的时候回验证是否是 url
	
number：
	规定填写数字，不是数字无法输入
	配合属性 max、min、step 规定可填写数字的范围，在提交的时候会验证数字范围
	
search：
	规定是搜索框，其他同 text 一样
	
tel：
	规定填写电话号码
	pc端与 text 一致，移动端会弹出数字键盘按键

② 范围选择框

range:
	设置范围选择框，拖动滑块可以选择范围
	配合属性 min、max、step 控制可选范围

③ 颜色选择框

color:
	选择颜色

④ 日期时间选择框

date	选择日期，年月日
momth   选择哪一年的第几月
week	选择哪一年的第几周
time	选择时间 时、分
datetime-local  选择日期和时间 年月日时分

3.3 form 新增的属性

novalidate 如果设置了该属性，表单将不会进行验证。

4 HTML5 音视频标签

4.1 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	视频	src：指定视频的地址 width：设置视频宽度 height：设置视频高度 controls：显示控制条，不需要给值。 muted：设置静音，不需要给值。 autoplay：自动播放，不需要给值。 loop：设置视频循环播放，不需要给值。 preload：设置视频预加载，不需要给值。 poster：指定视频封面图的地址	双
audio	音频	src：指定视频的地址 controls：显示控制条，不需要给值。 muted：设置静音，不需要给值。 autoplay：自动播放，不需要给值。 loop：设置视频循环播放，不需要给值。 preload：设置视频预加载，不需要给值。	双
source	引入音视频资源	src：指定音视频资源的地址。 type：指定音视频资源的类型	单

4.2 使用音视频标签的注意事项

浏览器支持的视频格式： mp4、webm、ogg，推荐 mp4
浏览器支持的音频格式：mp3、wav、ogg，推荐 mp3
chrome 浏览器默认禁止了音视频的自动播放，除非设置静音。

4.3 音视频的兼容性写法（了解）

<video controls>
        <source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
        <source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
 </video>

<video src="../sources/video/movie.mp4" controls>
       您的破浏览器版本过低，请下载最新版的 chrome 浏览器
</video>

4.4 HTML5 兼容性处理

HTML5 的标签需要 IE9 以及以上的IE浏览器和非IE浏览器支持

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

导入 html5shiv.js 之后，IE8以及一下浏览器，支持 H5 新标签

lv_maogui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础详细笔记

HTML笔记1.1 HTML 的基本语法文档声明<!doctype html>注释标签（元素）标签的语义、功能标签的属性单标签还是双标签1.2 HTML 常用标签主体结构标签： html 页面的根标签双 head 页面头部双 body 页面主体，需要显示在页面上内容都写在body中双 HEAD 标签 title 页面的标题双标签 meta 设置页面的元信息单标签属性： name conten
复制链接

扫一扫