HTML笔记

HTML文档声明

<!DOCTYPE html>

HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档。
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性的问题。

HTML基本元素

1.HTML

<!DOCTYPE html>
<html lang="zh">
</html>

html元素是HTML文档根元素，一个文档中只能有一个，其他所有元素都是他的后代元素。
W3C标准建议为html元素增加一个lang属性值，作用是：
1.帮助语音合成工具确定要使用的发音。
2.帮助翻译工具确定要使用的翻译规则。

lang="en";告诉浏览器这个HTML文档的语言是英文。
lang="zh" ;表示中文。

2.head元素

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

head元素里面的内容是一些”元数据“(元数据：描述数据的数据)
一般用于描述网页的各种信息，比如字符编码，网页标题，网页图片。
以下列出的元素大多数情况下都是在head元素内容使用

1.mate 2.title 3.sytle 4.link 5.base 6.script 7.noscript

title元素

网页标题的元素

image.png

mate元素

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误回到其乱码。
一般都是使用UTF-8编码，涵盖了世界上几乎所有的文字。

body元素

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页具体的内容和结构。

h、p、strong元素

h
- 表示网页的标题
- h1~h6共规定了6个等级的标题
p
表示文章中的一个段落(paragraph)
strong
用于强调某些文本，粗体的显示效果。

pre元素

默认情况下，HTML代码的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格。
如果想完全保留HTML代码中的空格，换行，可以使用pre元素。

<p>我是p1    我是p2 我是p3</p>
<pre>我是p1    我是p2 我是p3 </pre>

image.png

字符实体

HTML中有一些字符是预留出来做特殊用途的，比如
- 大于号 (<)
- 小于号 (>)
要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有两种
- &entiry_name; 这种格式成为实体名称。如 &nbsp
- &#entiry_name;这种格式称为实体编号。如 &#160
字符实体表 https://www.w3school.com.cn/tags/html_ref_entities.html

code元素

用于显示程序代码
元素要做到见名知意，可以在元素要放在合适的位置。

<code> This is code </code>

br元素

单标签，表示强制换行。

<br>

img元素

img元素专门用来显示图片(img是image的缩写)。单标签

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" 
     alt="占位文字" (图片加载失败的时候显示)
     width="100"
     height="100">

scr属性（scr是source的缩写）用来设置图片的路径（URL）
- 绝对路径：完成的描述文件位置的路径。如上面scr的内容。
- 相对路径：由这个文件所在的文件夹引起的跟其他文件的路径关系。
  - .代表当前文件夹(1个.),可以省略。
  - ..代表上级文件夹(2个. )
- 对于网页来说，不管什么操作系统(Windows、Mac、Linux)，路径分隔符都是/,而不是\
web中常用的图片格式有
- png：静态图片、支持透明
- jpg：动态图片、不支持透明
- gif：动态图片、静态图片、支持透明
注意
img元素如果只设置了width(或者height),浏览器会自动根据图片宽高比计算出height(或 width)
在HTML5规范中，alt是img元素的必要属性。
width、height的默认单位是px。(px就是像素)

a元素

a元素的作用
-定义超链接，用户打开新的URL

(

image.png
常用属性
- herf: 指定要打开的URL
  Hypertext Reference的简称
- target: 在哪里打开URL
target可以有以下几种取值
_self:默认值，在当前窗口中打开URL
_blank:在新的窗口中打开URL
_parent:在父窗口中打开URL
_top:在顶级窗口中打开URL
在某个frame的name值：在某个frame中打开URL

    <iframe src="http://www.baidu.com" name="frame1" frameborder="1"  width="200" height="200"></iframe>
    <iframe src="http://www.baidu.com" name="frame2" frameborder="1"  width="200" height="200"></iframe>
    <a href="http://www.qq.com" target="frame1">试试看</a>

iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档。

    <iframe src="http://www.baidu.com" name="frame1" frameborder="1"  width="200" height="200"></iframe>

frameborder 属性
用于规定是否显示边框：1->显示、0->不显示

base元素

可以利用base元素设置当前页面所有a元素的默认行为
base元素写在head元素中

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>
<div>
    <p><img src="img/bd_logo1.png" alt=""></p>
    <p><a href="http://s?wd=iOS" alt="">搜索iOS</a></p>
    <p><a href="http://www.520it.com" alt="">去小码哥学习</a></p>
</div>
</body>
</html>

锚点链接

锚点链接可以实现：跳转到网页中的具体位置
<a href="#one">go</a>
- 点击go会定位
  - id值为one的元素
  - name值为one的a元素

伪链接

有时点击链接的时候并不希望打开新的URL，而是希望干点别的事情，这时可以使用伪链接。
伪链接：没有指明具体链接地址的链接
点击链接后具体要做什么事情，需要编写对应的JavaScript代码

    <a href="#" onclick="return false;">伪链接1</a>
    <a href="javascript:" >伪链接2</a>

所以有时候可以将链接当做按钮来用
图片链接
- img元素跟a元素一起使用，可以实现图片链接

    <a href="http://www.baidu.com">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </a>

URL

什么是URL？
- URL的全称是Uniform Resource Locator（统一资源定位符）
- URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL
- 通过1个URL,能找到互联网上唯一的一个资源
URL的格式
- URL的基本格式 = protocol://hostname/path = 协议://主机地址/路径
- 协议：不同的协议，代表着不同的资源查找方式、传输方式
- 主机地址：存放资源的主机ip地址(域名)
- 路径：资源在主机中的具体位置

https是协议，
www.baidu.com是主机地址，
img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png是在主机上的路径

https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

URL常见的协议
- http
  - 超文件传输协议，访问的是远程的网络资源，格式是http://
  - http协议时在网络开发中最常用的协议
  - https协议相当于http协议的安全版
- file
  - 访问的是本地计算上资源，格式是file://
- moailto
  - 访问的是电子邮件地址，格式是mailto://
- ftp
  - 访问的是共享主机的文件资源，格式是 ftp://
- ed2k
  - 通过支持ed2k(专用下载链接)协议的P2P软件访问该资源(代表软件：电驴)，格式是ed2k://
- thunder
  - 通过支持thunder(专用下载链接)协议的P2P软件访问该资源(代表软件:迅雷),格式是thunder://

标签(也叫元素)语义化

什么是标签语义化
- 选择标签的时候要尽量让每一个标签都有正确的语义
虽然很多标签之间互转之后也能实现功能，但还是要遵守"标签语义化"的原则
-比如用strong 实现a、img的功能
标签语义化的好处
- 方便代码维护
- 减少让开发者之前的沟通成本
- 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
- 让搜索引擎能够正确识别重要的信息
总结：使用最合适的标签去做最合适的事情。

列表

列表简介

HTML提供了3组常用的用来展示列表的元素
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd

有序列表- ol、li

ol （ordered list）
- 有序列表、直接子元素只能是li
li （list item）
- 列表中的每一项

<body>
<h2>热门车系</h2>
<ol>
<li>奥迪a6</li>
    <li>宝马5系</li>
    <li>宝马3系</li>
    <li>雅阁</li>
    <li>福克斯</li>
</ol>
</body>

image.png

无序列表:ul、li

ul （unordered list）
无序列表、直接子元素只能是li
li (list item)
- 列表中的每一项

<body>
<h2>热门车系</h2>
<ul>
    <li>慕尚</li>
    <li>飞驰</li>
    <li>欧陆系列</li>
    <li>添越</li>
    <li>宾利臻选易手车</li>
</ul>
</body>

image.png

li一定要是ul或者ol的直接子元素

定义列表：`dl`、`dt`、`dd`

dl(definition list)
- 定义列表、直接子元素只能是dt、dd
dt(definition term)
- 列表中每一项的项目名
dd（definition description）
- 列表中每一项的具体描述，是对dt的描述、解释、补充
- 一个dt后面一般紧跟着1个或者多个dd
dd、dt常见组合
- 事物的名称、事物的描述
- 问题、答案
- 类别名、归属这类的各种事物


<body>
<dl>
    <dt>西瓜汁</dt>
    <dd>红色的饮料</dd>

    <dt>咖啡</dt>
    <dd>黑色的饮料</dd>

    <dt>牛奶</dt>
    <dd>白色的饮料</dd>
    <dd>超有营养</dd>

</dl>
</body>

image.png

列表相关的CSS属性

列表相关的常见CSS属性有4个:list-style-type、list-style-image、list-style-position、list-style
- 适用于display设置为list-item元素,比如li元素
- 他们都可以继承，所有设置给ol、ul元素，默认也会应用到li元素
list-style-type:设置li元素前面标记的样式
- disc(实心圆)、circle(空心圆)、square(实心方块)等
- none(什么也没有)
list-style-image：设置某张图片为li前面的标记，会覆盖list-style-type的设置
list-style-position:设置li元素前面标记的位置，可以取out-side,inside2个值
list-style是list-style-type、list-stype-image、list-style-position的缩写属性
- list-style:outside url("image/dot.png")
一般最常用的还是设置为none，去掉li元素前面的标记list-style:none;

表格

常见元素

table 表格
tr 表格中的行
td行中的单元格

table的常见属性
- border ：边框的宽度
- cellpadding：单元格内容的间距
- cellspacing：单元格之间的间距
- width：表格的宽度
- align：表格的水平对齐方式(left、center、right)
tr的常用属性
- valign：单元格的垂直对齐方式(top、middle、bottom、baseline)
- align：单元格的水平对齐方式(left、center、right)
th、td的常用属性
- valign：单元格的垂直对齐方式top、middle、bottom、baseline
- align：单元格的水平对齐方式left、center、right
- width：单元格的宽度
- height：单元格的宽度
- rowspan：单元格可横跨的行数
- colspan：单元格可横跨的列数

细线表格的实现

方法1
- 表格的border为0(或不设置border)
- 分别设置表格和单元格的背景色
  - 表格背景色决定了表格线的颜色
- 设置cellspacing的值
  - 决定了表格线的粗细
方法2


        table {
            /*合并单元格的边框*/
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
        }

其他元素

tbody ：元素的主体
caption：表格的标题
thead：表格的表头
tfoot：表格的页脚
th：表格的表头单元格

border-spacing

用于设置单元格之间的水平、垂直举例，比如
table{border-spacing:10px 20px}
- 2个值分别是cell之间的水平、垂直间距
- 如果只设置1个值,同时代表水平、垂直间距

表单

常用元素

form
- 表单。一般情况下，其他表单相关元素都是他的后代元素
input
- 单行文件输入框、单选框、复选框、按钮等元素
textarea
- 多行文本框
select、option
- 下拉选择框
button
- 按钮
label
- 表单元素标题
fieldset
- 表单元素组
legend
- fieldset的标题

input的常用属性

type：input的类型
- text：文本输入框(明文输入)
- password：文本输入框(密文输入)
- radio：单选框
- checkbox：复选框
- button：按钮
- reset：重置
- submint：提交表单数据给服务器
- hidden：隐藏域
maxlength：允许输入的最大字数
placeholder：占位文字
readonly：只读
disabled：禁用
check：默认被选中
- 只有当type为radio或checkbox时可用
autofocus：当页面加载时，自动聚焦
name：名字
- 在提交数据给服务器时，可用于区分数据类型
value：取值
form：设置所属的form元素(填写form元素的id)
- 一旦使用了此属性，input元素即使不写在form元素内部。它的数据也能够提交给服务器。

布尔属性

布尔属性可以没有属性值。写上属性名就代表使用这个属性。
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果给布尔属性设置，值就是属性名本身

<!-- 以下两种写法是等价的，建议采取第一种-->
<!--第一种-->
<input type="text" readonly disabled>
<input type="radio" checked>
<!--第二种-->
<input type="text" readonly="readonly" disabled="disabled">
<input type="radio" checked="checked">

按钮

普通按钮(type=button)：使用value属性设置按钮文字
重置按钮(type= reset)：重置它所属form的所有表单元素(包括input、textarea、select)
提交按钮(type=submit)：提交它所属form的表单数据给服务器(包括input、textarea、select)

<input type="button" value="普通按钮">
<input type="reset" value="重置">
<input type="submit" value="注册">

默认情况下,敲回车会自动提交表单数据给服务器
- 如需禁止此行为,需要编写相应的javaScript代码

按钮-button元素

使用button元素也能实现按钮，功能效果跟input一样

<button type="button">普通按钮</button>
<button type="reset">重置</button>
<button type="submit">注册</button>

input和label

label元素一般跟input配合使用，用来表示input的标题
label可以跟某个input绑定，点击label就可以激活对应的input

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
也可以使用以下写法
<label for="username">
    用户名：
    <input type="text" id="username">
</label>

image.png

radio的使用注意

name值相同的radio才具备单选功能

<span>性别：</span>
<label for="male">男</label>
<input type="radio" id="male" name="sex" value="1" checked>

<label for="female">女</label>
<input type="radio" id="female" name="sex" value="0">

image.png

checkbox的使用注意

属于同一种类型的checkbox，name值要保持一致

<span>兴趣：</span>
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" name="hobby" value="1">
<label for="football">足球</label>
<input type="checkbox" id="football" name="hobby" value="2">
<label for="run">跑步</label>
<input type="checkbox" id="run" name="hobby" value="3">

image.png

隐藏域(type=hidden)

隐藏域不会显示到网页界面上,但提交表单数据的时候，它的name和value也会被提交给服务器
如果有些发放给服务器的数据，是不需要用户输入的，或者不希望在界面上显示出来，可以使用隐藏域

<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="hidden" name="id" value="666">
<input type="submit" value="百度">
</form>

image.png

去除input的Tab键选中效果

将tabindex属性值设置为-1

textarea

textarea的常用属性
- cols：列数
  -rows：行数
缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;

select和option

option是select的子元素，一个option代表一个选项

<select name="edu" id="edu">
    <option value="1">小学</option>
    <option value="2">初中</option>
    <option value="3">高中</option>
    <option value="4">大专</option>
    <option value="5">本科</option>
    <option value="6">硕士</option>
    <option value="7">博士</option>
</select>

select常用属性
- multiple：可以多选
- size：显示多个项
option常用属性
- selected：默认被选中
  
  image.png

fieldset和legend

image.png

form的常用属性

action
- 用于提交表单数据的请求URL
method
- 请求方法(get和post),默认是get
target
- 在什么地方打开URL(参考a元素的target)
enctype
- 规定了在向服务器发送表单数据之前如何对数据进行编码
- 取值有3种
  - application/x-www-form-urlencoded：默认编码方式
  - multipart/form-data：文件上传时必须为这个值，并且method必须为post
  - text/plain：普通文本传输
accept-charset：规定表单提交时使用的字符编码

get和post

提交表单数据时，浏览器发送的是http请求,有2种请求方式可以选择
- get
  - 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如https://www.baidu.com/s?wd=aa&id=666
  - 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过18KB
- post
  - 发给服务器的参数全部放在请求体中
  - 理论上,post传递的数据量没有显示，具体还得看服务器的处理能力

HTML笔记

HTML文档声明

HTML基本元素

1.HTML

2.head元素

title元素

mate元素

body元素

h、p、strong元素

pre元素

字符实体

code元素

br元素

img元素

a元素

iframe元素

base元素

锚点链接

伪链接

URL

标签(也叫元素)语义化

列表

列表简介

有序列表- ol、li

无序列表:ul、li

定义列表：dl、dt、dd

列表相关的CSS属性

表格

常见元素

细线表格的实现

其他元素

border-spacing

表单

常用元素

input的常用属性

布尔属性

按钮

按钮-button元素

input和label

radio的使用注意

checkbox的使用注意

隐藏域(type=hidden)

去除input的Tab键选中效果

textarea

select和option

fieldset和legend

form的常用属性

get和post

定义列表：`dl`、`dt`、`dd`