博客

HTML基础详细笔记

  • Post author:
  • Post category:其他




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原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。