HTML学习

本教程里的资料来源于网友的资料,自己整理以供学习。视频学习:黑马程序员

什么是HTML?

HTML:超文本标签语言、注意:H5 并不是新语言,而是 Html 语言的第五个版本

支持:

  • 所有主流浏览器都支持H5(Chrome,Firefox,Safari …)
  • IE9(部分支持)及以上支持H5,但是IE8(完全不支持)及以下不支持H5

增加了新特性:

  • 语义特性(aside、nav、header、footer…)
  • 本地存储特性(localStorage、sessionStorage)
  • 网页多媒体(video、audio)
  • 二维三维(transform)
  • 特效

HTML的基本骨架

1
2
3
4
5
6
7
8
9
10
11
<!--根标签/根节点-->
<html>
<!--用于存放title、meta、base、style、script、link-->
<head>
<!--标题标签-->
<title></title>
</head>
<body>
<!--主体标签-->
</body>
</html>

vscode 快速生成 html 骨架:

  • !后tab
  • *快速生成必备插件:emmet

其他

<!DOCTYPE xxx>(DTD):文件类型定义,用于告诉浏览器该用什么规范解析文件,必须写在HTML文档第一行、如:说明使用的是H5版本

严格模式:又称标准模式,指浏览器按照W3C标准解析代码

混杂模式:又称怪异模式或兼容模式,值浏览器按照自己的方式解析代码

如何区分?:看DTD,如果文档包含严格的DOCTYPE,那么一般以严格模式呈现。(严格DTD–严格模式);如果包含过渡DTD和URI(统一资源标识符)的DOCTYPE,也以严格模式呈现。但有过渡DTD而没有URI会导致页面以混杂模式呈现。(有URI的过渡DTD——严格模式;没有URI的过渡DTD——混杂模式);DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现(DTD不存在或者格式不正确——混杂模式);HTML5没有DTD,没有严格模式与混杂模式的区别;区分意义:如果只有严格模式,那么旧网站会受到影响,如果只有混杂模式,那么就会回到浏览器大战的混乱,每个浏览器都有自己的解析模式

严格模式与混杂模式的解析不同点:

  • 严格模式设置元素的宽高指的是元素内容的宽度和高度,而在混杂模式则包括了padding和margin
  • 严格模式无法设置行内元素的高宽。混杂模式则可以
  • margin:0 auto 在IE会失效

html标签的lang属性:用来定义当前文档显示的语言,en为英语zh-CN为中文

字符集

  • UTF-8:包含全世界所有国家需要用到的字符
  • GB2312:简体中文
  • BIG5:繁体中文
  • GBK:包含全部中文字符

H5中字符集写法

1
<meta charset="UTF-8">

标签的语义化:即用合适的标签标记对应的内容,内容与标签的含义相近。比如说导航栏用nav标签,文章段落用p标签等等。标签语义化的好处在于使Html结构更清晰,便于阅读和SEO,有利于团队开发

遵循的原则:先确定语义的Html,再选合适的CSS

HTML标签

标签

标签分类
  • 双标签 <标签名>内容</标签名>: divpspan
  • 单标签 <标签名/>: brinputimg
标签关系
  • 嵌套关系:如Html是所有标签的父标签
  • 并列关系:如head和body标签
  • 注:如果两个标签是嵌套关系,子元素最好缩进一个Tab的身位。若是并列关系,最好上下对齐。
标签类型

一、排版标签

  1. 标题标签:

    1
    2
    3
    4
    5
    6
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>从大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

    文字大小h1-h5逐渐变小

  2. 段落标签:

    1
    <p> 文本内容 </p>

    文本内容

  3. 水平线标签:

    1
    <hr />(单标签) 增加一条线 hr=horizon

  4. 换行标签:

    1
    2
    <br />
    br=<break></break>
  5. div span标签:

    1
    2
    3
    4
    网页布局的两个主要盒子  div=division

    <div></div>
    <span></span>

    二、文本格式化标签

  6. 字体加粗

    1
    2
    <strong></strong>
    <b></b>

    字体加粗

    字体加粗

  7. 字体倾斜

    1
    2
    <em> </em>
    <i> </i>

    字体倾斜
    字体倾斜

  8. 字体加删除线

    1
    <del> </del>

    字体加删除线

  9. 字体加下划线

    1
    2
    <ins> </ins>
    <u></u>

    字体加下划线

  1. 其他

    1
    2
    3
    4
    <sup>定义上标</sup>
    <sub>定义下标</sub>
    <small>变小字号</small>
    <big>变大字号</big>

    123定义上标
    123定义下标
    变小字号
    变大字号

标签属性

基本语法格式

1
2
3
4
格式:
<标签名 属性1="属性值" 属性2="属性值2" ...>内容</标签名>
示例:
<div id="box" class="box1">我是盒子</div>

在上面的语法中:

  • 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  • 任何标签的属性都有默认值,省略该属性则取默认值
  • 采取 键值对 的格式 key=”value”的格式

图像标签

  • 基本语法格式

    1
    2
    <img src="图像URL(图像路径)" />
    <img src="./public/img.jpg" />
  • 标记属性
    属性属性值
    srcURL
    alt文本
    title文本
    width像素
    height像素
    border像素

链接标签

基本语法格式:

1
<a href="跳转目标"  target="目标窗口的弹出方式">文本或图像</a>

点击跳转到我的博客

href:用于指定链接目标的url地址,当为标签应用href属性值时,它就具有了超链接的功能

target:用于指定链接页面打开方式,有 _self 和 _blank 两种取值,其中self为默认值(在当前页面打开),blank为在新窗口中打开方式。

即如果想要对元素添加点击链接功能,则需要对其加上链接标签即a标签

注意 :

  • 外部链接:需要添加http://

  • 内部链接:直接链接内部页面名称即可 比如<a href="index.html">首页</a>

  • 如果没有确定链接目标,通常将链接标签的href属性值定义为”#”,表示该链接暂时为一个空链接

  • 除了文本,图像表格音频视频等都可以添加超链接
    如:<a href="img标签.html" target="blank"> <img src="C:\photo.jpg"> </a>

锚点定位

1
2
3
<a href="#id=uu">xxx</a>
<!-- 记得添加#和""号!非常重要!-->
<标签名 id=uu> </标签名>

点我跳转到开头

Base标签

在head中添加<base target="_blank" />可实现所有链接都以新窗口打开,同理_blank改为_self则实现所有链接都以自身窗口打开
若想实现其中某个链接以不同方式打开,则对其单独设置target属性即可。

特殊字符代码

都要记得加“&”

注意:实体名称对大小写敏感!

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
引号&quot;&#34;
撇号&apos; (IE不支持)&#39;
分(cent)&cent;&#162;
£镑(pound)&pound;&#163;
¥元(yen)&yen;&#165;
欧元(euro)&euro;&#8364;
§小节&sect;&#167;
©版权(copyright)&copy;&#169;
®注册商标&reg;&#174;
商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

注释标签

1
<!--注释内容--> 

养成注释的习惯!

路径

相对路径:

  1. 图像文件和HTML文件位于同一文件夹。只需输入图像文件的名称即可,如<img src="logo.gif" />
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用”隔开,如<img src="img/logo.gif" 1>
  3. 图像文件位于HTML文件的上- -级文件夹:在文件名之前加入.””,如果是上两级,则需要使用”./. .”.以此类推,如<img src="./logo.gif">

绝对路径:

“D:\logo.gif”.或完整的网络地址,例如:网络地址:”https://zykjofficial.gitee.io/img/avatar.png

一般不用绝对路径

无序列表

各个列表项之间没有顺序级别之分,是并列的(没有顺序数字前戳)。

基本语法格式:

1
2
3
4
5
6
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
  • 列表项1
  • 列表项2
  • 列表项3

注意事项:

  1. <ul></ul>之间只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

  2. <li></li>之间相当于一个容器,可以容纳所有元素

  3. 无序列表的样式可让CSS来完成设置

有序列表

带顺序数字前缀的列表

基本语法格式:

1
2
3
4
<ol>
<li>列表项</li>
....
</ol>

属性说明:

属性说明
1百度吧。。。
A百度吧。。。
typea百度吧。。。
I百度吧。。。
i百度吧。。。
start数值有序列表的起始数字
  1. 列表项

注意事项与无序列表相同

自定义列表(理解即可)

常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。一般用于网页结尾。

基本语法:

1
2
3
4
5
6
7
8
9
10
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
名词1
名词1解释1
名词1解释2
名词2
名词2解释1
名词2解释2

表格

  • 基本语法格式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <table>
    <tr>
    <th>标题1</th>
    <th>标题2</th>
    ...
    </tr>
    <tr>
    <td>内容1</td>
    <td>内容2</td>
    ...
    </tr>
    </table>
    标题1标题2
    内容1内容2

    table:为整体框架

    tr:行数

    th: 表头(通俗来说就是标题)

    td:每一行内的单元格数(没有列的说法)

    注意事项:table里只能放tr标签,不能放其他。而td里可以放任何东西。

  • 表格属性

    属性名含义像素值
    border设置表格的边框(默认border=”0”无边框)像素值
    cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2像素)
    cellpadding设置单元格内容与单元格边框之间的空白间距像素值(默认为1像素)
    width设置表格的宽度像素值
    height设置表格的高度像素值
    align设置表格在网页中的水平对齐方式left、center、 right
  • 表头标签

    把表头的<td>换成<th>,会自动加粗居中

  • 表头结构

    表格布局时可分为头部主体和页脚

    <thead></thead>:用于定义表格头部

    <tbody></tbody>:用于定位表格主体

    以上两种都不显示,只是用于布局。

  • 表格标题

    <caption>标题</caption> 写在table标签内

  • 合并单元格

    跨行合并:rowspan 跨列合并:colspan

    合并单元格的思想:将多个内容合并的时候,会有多余的东西,将其删除。例如把3个td合并成一个,就多于2个,需要删除

    公式 删除的个数=合并的个数-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <table width="500" height="200" border="1" cellpadding="0" cellspacing="0" align="center">
    <!--表格框架标签-->
    <caption>表格</caption>
    <thead>
    <!--表头结构标签-->
    <tr>
    <!--行标签-->
    <th>姓名</th>
    <!--表头标签-->
    <th>性别</th>
    <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <!--表头主题标签-->
    <tr>
    <td>克拉克肯特</td>
    <!--单元标签-->
    <td></td>
    <td>35</td>
    </tr>
    <tr>
    <td>布鲁斯韦恩</td>
    <td colspan="2"></td>
    <!--跨列合并-->
    </tr>
    <tr>
    <td>戴安娜普林斯</td>
    <td></td>
    <td rowspan="2">28</td>
    </tr>
    <tr>
    <td colspan="2">巴里艾伦</td>
    </tr>
    </tbody>
    </table>
    表格
    姓名性别年龄
    克拉克肯特35
    布鲁斯韦恩
    戴安娜普林斯28
    巴里艾伦

    表格不要纠结于外观,是CSS的作用

表单

组成:表单控件,提示信息,表单域3个部分构成

  • input控件(重点)及其属性

    属性属性值描述
    text单行文本输入框
    password密码输入框
    radio单选按钮
    checkbox复选框
    typebutton普通按钮
    submit提交按钮
    reset重置按钮
    image图像形式的提交按钮
    file文件域
    name由用户自定义控件的名称
    value由用户自定义input控件中的默认文本值
    size正整数input控件在页面中的可见的字符数
    checkedchecked定义选择控件默认被选中的项
    maxlength正整数控件允许输入的最多字符数

    type:image可以设置按钮为其他图像 <input type="image" src="img/logo.jpg">

    radio: 通过设置相同name属性来实现单选

    file:类型可以用来上传文件 添加multiple属性可以上传多个文件

    name:如果单选框radio是同一组,那么可以通过name属性来设置为一组,从而限制选择

    value:属性可以改变按钮中的文本

    checked:属性可以设置默认选中项 即<input type="button" checked="checked" />

    maxlength:可以设置其最大输入字符数

    其他常用属性值:

    placeholder:可实现用户输入时里面的文字消失,删除所有文字,自动返回

    autofocus:实现打开网页时,光标自动定位到其所在表单

    autocomplete:实现自动记录表单内容,再次输入时可智能提示

    1
    2
    3
    用户名:
    <input type="text" autocomplete="on" name="username">
    <input type="submit">

    注意:必须要有提交按钮。其次表单必须要有名字

    required:要求必须输入

    pattern:正则表达式验证

    multiple: 实现上传填写多个东西

    form:指定某个表单id,再将当前表单的form属性值设置为与其id相同。在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据进行提交

  • H5 input新增的type类型

    类型使用示例含义
    email<input type="email">输入邮箱格式
    tel<input type="tel">输入手机号格式
    url<input type="url">输入url格式
    number<input type="number">输入数字格式
    search<input type="search">搜索框(体积语义化)
    range<input type="range">自由拖动滑块
    time<input type="time">小时分钟
    date<input type="date">年月日
    datetime<input type="datetime">时间
    month<input type="month">月年
    week<input type="week">星期年

    email:用于填写邮箱,填写时必须有@符号,同时包含服务器域名。如不能满足验证,则会阻止当前的数据提交

    tel:用于填写号码,不是用来验证,是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字

    url:填写网址。只能输入合法的网址,必须包含http://

    number :只能输入数字 其中 max最大值 min最小值 value默认值

    color:选择颜色

Label

若想实现点击文字就可进入文本框,则可用label标签包裹整个表单选项

1
<label>输入账号:<input type="text" /></label> 

若有多个输入框,想定位到某个,则对目标框设置id,然后<label for="id"></label>

textarea

若想实现大量文本输入,则可用textarea标签

1
<textarea>请输入留言</textarea>  

 

H5新增的属性

属性描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
colsnumber规定文本区内的可见宽度。
disableddisabled规定禁用该文本区。
formform_id规定文本区域所属的一个或多个表单。
maxlengthnumber规定文本区域的最大字符数。
namename_of_textarea规定文本区的名称。
placeholdertext规定描述文本区域预期值的简短提示。
readonlyreadonly规定文本区为只读。
requiredrequired规定文本区域是必填的。
rowsnumber规定文本区内的可见行数。
wraphardsoft规定当在表单中提交时,文本区域中

select下拉菜单标签

1
2
3
4
5
6
<select> 
<option>北京</option>
<option selected="selected" >上海</option>
<option >广州</option>
<option>深圳</option>
</select>

其中selected="selected"代表默认选项

option也可以为单标签,效果一样

实现多选 multiple

1
2
3
4
5
6
<select multiple="multiple"> 
<option>北京</option>
<option>上海</option>
<option >广州</option>
<option>深圳</option>
</select>

表单域

即整个表单框架

  • 基本语法:

    1
    <form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
  • 常用属性:

    action:表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址

    method:用于设置表单数据的提交方式,其取值为get或post

    enctype:设置解码方式,如果有file表单元素,则一定为multipart/form-data

    name:用于指定表单的名称,以区分同一个页面中的多个表单。

    注意:每个表单都要有自己的表单域

H5 常用新标签

header:定义文档的页眉头部

nav:定义导航链接的部分

footer:定义文档或节的页脚 底部

article:定义文章

section:定义文档中的节

aside:定义其所处内容之外的内容 侧边

datalist:标签定义选项列表,请与input元素配合使用该元素

fieldset:可将表单内的相关元素分组,打包

Datalist用法

通过设置id并在input中的list属性链接这个id,从而达到智能显示的效果

1
2
3
4
5
6
7
8
9
<input type="text" value="输入明星" list="star">
<!-- input里面用list -->
<datalist id="star">
<!-- datalist里面用id实现和input的链接 -->
<option >刘德华</option>
<option >郭富城</option>
<option >黎明</option>
<option >张学友</option>
</datalist>

datalist与selection的区别:前者不仅可以选择,还可以输入。

datalist弊端:在不同浏览器的显示不同,少用

注:如果与之连接的input type值为url,则其value值必须添加http://

Fieldset用法

与legend搭配使用,legend包含在fieldset里面负责写标题。例:

1
2
3
4
5
6
<fieldset> 
<legend>用户登录</legend>
<!-- 标题 -->
用户名:<input type="text"> <br />
密  码:<input type="password">
</fieldset>
用户登录用户名:
密 码:

多媒体标签

引用网上的视频:embed

引用本地视频:video 三种格式:mp4、ogg、wmv

引用本地音频:audio 三种格式:mp3、ogg、wav

常用属性 :

autoplay:控制自动播放

controls:添加进度条等控制元素

loop:x 循环播放x次

poster:设置视频封面

格式的兼容:

1
2
3
4
5
<!-- 从上往下一个个尝试 --> 
<video controls>
<source src="xxx.ogg" type="video/ogg">
<source src="xxx.mp4" type="video/mp4">
</video>

解决低版本浏览器新标签不兼容的措施

  1. 通过创建新标签并转化标签模式

    1
    2
    3
    <script> 
    document.createElement("名字"); //默认为行级元素
    </script>
  2. 通过引入第三方插件

    1
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>