web前端-2.HTML的基础知识点

2.1. Html常用元素

1. 网页标题标签

h1~h6 双标记 默认居左且加粗 一号标题字体最大，六号标题字体最小，逐级递减

属性： align=“left|center|right” 设置元素内容水平对齐方式

2. 段落标记

<p>内容</p> 

属性：align=“left|center|right” 设置元素内容的水平对齐方式

3. 换行标记：没有任何的属性

<br/>

4. 水平线

<hr/>

属性： align=“center|left|right” 设置水平线的水平对齐方式
color="" 设置水平线的颜色；颜色的取值为英语单词
width="" 设置水平线的长度，水平方向
size="" 设置水平线的宽度，垂直方向

注意：html默认单位为像素（px），当单位为像素时建议不写

5. 打开浏览器控制台：

F12
Fn+F12
ctrl+shift+i

6. 图片

<img/>

属性： src:路径； width:设置元素的宽度 ；height:设置元素的高度
图片常用格式： jpg ； png(支持背景透明)； gif(支持动图) ； psd（ps）

2.2. HTML基本结构

文档类型声明：
作用：告诉浏览器按当前标准解析代码 ；!DOCTYPE ：html ， HTML5的文档类型声明

HTML不区分大小写，双标记的结束标记可以省略，单标记的/可以省略（不推荐）
HTML4.01 严格 过渡 框架
XHTML 严格的HTML，区分大小写，结束标记必须写上

删除文档类型声明：
删除后浏览器为混杂模式，各个浏览器会按照自己的标准解析代码
加上文档类型声明，浏览器为标准模式，都按照当前标准解析代码

DTD文档 = 有文档类型声明 = doctype
document：文档

注意：不是标签

lang=“en” 对页面主要语言进行声明 en表示英语 zh-CN表示中文
head中常用标签：meta、title、link、style、script等

字符集

中文开发网站常用utf-8；国外常用gbk

<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="author" content=""/>

name:名字
content：内容
keywords：关键字
description：描述
author：作者

2.3. 图片img

路径：

1）绝对路径
①网址 直接去复制
②盘符
2）相对路径 html文件去找图片
①平级 直接写
②下一级 /
③上一级 …/上两级…/…/

图片的属性：

src：路径 全称source：资源
alt：图片不能正常显示，给予提示
title：鼠标悬停给予提示、除了br，其他标签都有的属性
width 设置元素的宽度 height 设置元素的高度
注意：图片宽高设置一个属性，等比例缩放；html默认单位为像素（px）

2.4. 块级元素和行级元素

块级元素和行内元素的区别：

1）块级元素独占一行，行内元素在同一行显示 2）块级元素默认宽度为100%，行内元素默认宽度由内容撑开
3）块级元素可以设置宽高，行内元素设置宽高不生效
4）块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右
5）块级元素
div,hn,p,hr,ul,ol,li,dl,dt,dd,table,tr,td,th,form,header,nav,footer,aside,article,section…
6）行内元素
span,img,a,b,i,u,s,del,em,strong,sup,sub,input,button,textarea,video,audio…
%：相对于父元素
注意： 块级元素可以包含块级元素和行内元素 行内元素一般不要包含块级元素 hn和p 一般不包含div

2.5. 超链接a

1）作用：做跳转
2）标签：
html <a></a>
行内元素 双标记
3）属性：

• href：路径
  ①绝对路径 ：网址； 盘符
  ②相对路径： 平级 ；下一级； 上一级
  href="#" 空连接：效果返回页面顶部

• target:目标 ；设置在那个窗口打开
  取值：
  _self 默认值：原窗口打开
  _blank 新窗口打开 blank：空

• name：名字（锚点：同一个页面做跳转）
  ①点击a跳转到a
  <a href="#mingzi">点击</a>
<a name="mignzi">跳转到</a>
  注意：name只能给a标签加
  ②点击a跳转到块级元素
  <a href="#mingzi">点击</a>
<p id="mingzi">到</p>
  注意：ID具有唯一性（像身份证号码）

2.6. 锚点

1、点击a跳转到a

<a href="#santi">三体</a>
<a href="" name="santi" >三体相关内容</a>

2、点击a跳转到块级元素

<h1 id="santi">跳转到我</h1>
<a href="#santi">三体</a>

2.7. 图片之间的跳转

<a href="img4.gif">
    <img src="img3.gif" alt="哈哈哈哈" title="吃西瓜的小新"/>
</a>

2.8. 文本格式化标签

作用：给文本添加样式 双标记 行内元素
掌握： <i></i> 倾斜显示 <del></del> 删除线 <b></b> 加粗
了解：

<u></u>  下划线 
<s></s>  删除线  
<sup></sup>  上标		 
<sub></sub>  下标
<small></small>  小号字体	 
<big></big>  大号字体     ```

**浏览器默认字体大小为16px**

<b>加粗 bold</b>
<i>倾斜 italic</i>
<u>下划线 underline</u>

<em>强调 倾斜显示</em>
<strong>强调 加粗显示</strong>

<sup>上标</sup>
<sub>下标</sub>
2<sup>3</sup>
H<sub>2</sub>O

<small>小号字体</small>
<big>大号字体</big>

2.9. 无序列表ul>li

1、无序列表的结构

	<ul>  unoredered  list  无序  列表
    <li>...</li>  list  item  列表  项
    <li>...</li>
    <li>...</li> </ul> ```

 **注意：ul包含li，所有内容写在li里面**

2、常用结构

<ul>
    <li><a href="#">内容</a></li>
    <li><a href="#">内容</a></li>
    <li><a href="#">内容</a></li>
</ul>

3、ul和li的属性

type：设置项目符号
disc 默认值 黑色实心圆
circle 空心圆
square 黑色实心矩形
none 不显示

4、 无序列表的相互嵌套

列表里面的所有内容写在li里面

<ul>
    <li>....
        <ul>
            <li>....</li>
        </ul>
    </li>
</ul>

2.10. 有序列表ol>li

1）结构

<ol>  ordered  list
    <li>....</li>  list item
    <li>....</li>
    <li>....</li>
</ol>

2）ol和li的属性

type：设置项目符号 默认值为1 可取值a A i I（罗马）
start:设置从第几个开始 取值为数字
reversed：倒序 reversed=“reversed” 当属性等于属性值，可以简写为属性

3）有序列表相互嵌套

<ol>
    <li>...
        <ol>
            <li>....</li>
        </ol>
    </li>
</ol>

2.11. 自定义列表dl>dd

<dl>
    <dt>主题</dt>
    <dd>描述</dd>
    <dd>描述</dd>
    <dd>描述</dd>
    <dt>主题</dt>
    <dd>描述</dd>
    <dd>描述</dd>
    <dd>描述</dd>
</dl>

2.12. 表格table>tr>td

1）作用 :向用户展示数据
2）特点 :同行等高 同列等宽 行：横向 列：纵向
3）标签

<table></table>  表格
<tr></tr>   行  table row
<td></td>   列、单元格  table data  cell  所有内容写在单元格内
<th></th>   特殊的单元格，默认水平居中且加粗,和td同一个位置
<caption></caption>  表格的标题

4）结构

table>tr*n>td*m——tab 注意：n和m大于0
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

5）table的属性
border 设置表格的边框，表格默认没有边框
align 设置表格的水平对齐方式，默认居左
width 设置表格的宽度
height 设置表格的高度
bgcolor 设置表格的背景颜色
background 设置表格的背景图片，当背景颜色和背景图片同时存在，背景图片的优先级高
cellpadding 设置内容距边框的距离
cellspacing 设置单元格之间的距离，当取值为0时，单元格之间没有距离，变为一条线

6)tr的属性
height 设置一行的高度
align 设置行内容的水平对齐方式，默认left，取值center、right
valign 设置行内容的垂直对齐方式，默认middle（居中），取值top（居上）、bottom（居下）
bgcolor 设置这一行的背景颜色 background 设置行的背景图片

7)td的属性
width 设置单元格的宽度 同列等宽
height 设置单元格的高度 同行等高
align 设置单元格内容的水平对齐方式
valign 设置单元格内容的垂直对齐方式
bgcolor 设置单元格的背景颜色
background 设置单元格的背景图片

掌握：
colspan 水平合并 写在开始合并的单元格内，取值为数字，删除的个数 = 取值的数字 - 1，水平合并删除同一行的td ;
rowspan 垂直合并 写在开始合并的单元格内，取值为数字，删除的个数=取值的数字 - 1，垂直合并删除后面几行的td

2.13. 表单

1、表单的作用

表格：向用户展示数据
表单：可以提交数据到服务器，使页面具有交互性

2、标签

<form>
    提交的数据
</form>

双标记、块级元素

注意：form之间不能相互嵌套，但是一个页面可以包含多个form
3、form的属性

<form name="表单的名称" action="提交的地址" method="提交的方式get|post"> 
</form>

get和post的区别：get为默认值
1）get提交的数据不安全，会在地址栏中显示，post安全
2）get只能提交少量的数据（不能大于2kb），post理论上没有限制

1GB = 1024MB 1MB = 1024KB 1BK =1024B
计算机底层二进制 0 1 1b = 8字节
英文 数字 标点符号 1个字节
汉字 2字节

4、表单元素

input:输入
type：类型
text：文本
userName:用户名 小驼峰命名法 第一个单词首字母小写，后面所有单词首字母大写
value：当期值
password:密码
radio：单选按钮、单选框
sex：性别
checkbox：多选按钮、多选框
submit：提交
reset:重置
button：按钮

普通的文本框  <input type="text"/>
密码框  <input type="password"/>
单选框  <input type="radio" name=""/>
多选框  <input type="checkbox"/>
提交按钮 <input type="submit"/>
重置按钮 <input type="reset"/>
没有任何功能的一个按钮 <input type="button"/>
提交按钮 <button></button>  默认type="submit"
重置按钮  <button type="reset"></button>
没有任何功能的按钮  <button type="button"></button>

下拉列表：
<select>
    <option>....</option>
    <option>....</option>
    <option>....</option>
</select>
 
多行文本框  文本域：
<textarea>...</textarea>
提示用户体验度，没有任何样式

当点击label之间的内容，相关的标签会被选中
<label for="">...</label>
label的for属性和表单元素的id属性一直

文件  <input type="file"/>  
//注意：默认的表单编码格式不支持上传文件，当表单元素有文件时，需要把表单的编码格式改为二进制，enctype="multipart/form-data"
隐藏域：  <input type="hidden"/>  隐藏域用户看不到，当它携带的信息可以正常提交
图片提交按钮：  <input type="image" src="路径"/>  

5、表单元素的属性

type 设置输入框的类型
name 表单元素的名称
value 当前值
checked 默认被选中，一般配合单选按钮和多选按钮使用,属性等于属性值
selected 默认显示，配合option使用，属性等于属性值
disable：禁用,属性等于属性值 readonly：只读，属性等于属性值

6、HTML5新增type类型

邮箱：  <input type="email"/>  必须包含@，@后面必须有内容
网址：  <input type="url"/>   必须包含一个协议，协议后面必须有内容
搜索：  <input type="search"/>
颜色：  <input type="color"/>
数字：  <input type="number"/>
范围：  <input type="range"/>
电话：  <input type="tel"/>
日期：  <input type="date"/>
周：  <input type="week"/>
月：  <input type="month"/>

7、HTML5新增属性

placehoder=“默认提示” 掌握 autofocus 自动获取焦点，推荐写在第一个表单元素上面
required 必填项
min和max 最小值和最大值，配合数字和范围使用
minlength和maxlength 最小长度和最大长度
step 步长，配合数字和范围使用，可以去任意值
multiple 可以输入多个，用英文的逗号隔开，配合邮箱和网址使用
auto：自动
focus：焦点 length：长度

2.14. 语义化标签

看到标签，知道其表示的含义 正确的标签干正确的事情，例如网页标题 hn,段落 p
优点：
1）有利于搜索引擎优化
2）有利于屏幕阅读者读取
3）有利于开发者的开发和维护

2.15. 实体字符

当页面一些特殊的字符产生歧义或者HTML不识别，可以用实体字符来替代

 
空格      掌握
<   <
>   >
版权   ©

2.16. HTML5新增语义化布局标签

双标记 块级元素
header 头部
nav 导航
footer 页脚
aside 侧边栏
article文章、帖子、博客、独立的一块
section 章节

在HTML5中有个块状元素（有意义的div），也就是说不用div标签，而是用名字式的元素
HTML是使用的header标签进行修改样式，header就是有意义的div

2.17. 视频和音频

1、视频vedio

1）标签
<video>您的浏览器不支持视频</video> 行内元素
2）支持的格式 .mp4 .ogg(移动端) .webM(高清)
3）属性
src 必须属性 路径
width 视频的宽度
height 视频的高度 poster="" 视频播放前显示一张图片
poster：海报 autoplay 自动播放 注意：谷歌浏览器不支持视频自动播放
controls 显示控制面板 loop 循环播放 muted 静音

2、音频audio

1）标签
<audio>您的浏览器不支持音频</audio> 行内元素
2）支持格式 .mp3 .ogg .wav
3）属性
src 必须属性 路径
loop 循环播放
autoplay 自动播放
controls 显示控制面板
muted 静音

3、source

1）作用 ：给浏览器提供多种视频或者音频格式的选择
2）标签 <source/>
3)语法

<video autoplay>
	<source  src=""/>
	<source  src=""/>
	<source  src=""/>
	 您的浏览器不支持视频
</video>