【HTML】HTML属性，标签，转义符（实体）

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

vscode快捷键

ctrl+f5 运行快捷键
代码格式化: Shift+Alt+F
alt+shift+箭头：复制该行代码到下一行

HTML

域名前面加上view-source:可以查看网页源代码
html是超文本标记语言，超文本是可以展示音频，视频，图片等不仅仅是文本，标记语言就比如有固定的标签有固定的含义。

属性

每一个标签可以接收一个或多个属性
属性可以有值，也可以没有
属性不区分大小写，属性值区分大小写

全局属性

img：src，a：href
全局属性有：class，data-*，id，hidden，title，style等

type

type=reset,是重置按钮的意思

target

_blank：打开一个新窗口
_self：这个是在当前窗体打开
_top：顶层
_parent：父级

download

 <a href="#" download="mi.html" target="_self">小米</a>

相当于链接另存为，并且名称为mi.html
不能和target="_blank"一起使用
只能触发下载自己网站上的资源
为什么要有download属性呢？在传统的浏览器中，要触发下载，需要后端的支持，给出特定的http头才会触发浏览器下载，而不是打开对应的内容。这个属性的出现可以让点击下载完全由前端来完成。

title

把鼠标放上去会有提示

alt

主要用在img标签上，指定在图片加载失败的时候替换文本
第二个作用是屏幕阅读器会将这些描述读给需要使用阅读器的使用者听

id

标签在整个页面唯一的值，一般来说起一个单一的单词，不以数字开头，没有空格

style

style属性里面写css的代码

class

给标签设置类名，通过空格分隔的单词列表，一个标签可以有多个类名，通过空格分割

tabindex

这个是tab键的索引，可以通过tab进行跳转，从而光标在它上面，实现交互

contenteditable

无值属性，可以改为编辑属性，类似于把任何的元素都改为input（text）这种类型

data-

data-属性可以自定义属性，防止和有特殊含义的属性重复

value

设定文字和默认值
input中，为按钮形态时设置上面的文字，为输入框时设置里面的默认内容

name

name里面写的是value代表的是什么
一般放在表单（input）里面用
id是唯一的，就像身份证号码一样，name的话可以重复的

  <input type="text" value="张三" name="name">

disabled

无值的属性
禁用这个输入域，变成不可编辑

required

设置这个输入域为必填项
不填的话无法用正常手段触发表单提交

maxlength/minlength

为文本输入框设置输入的最大长度
设置最小长度

placeholder

显示灰色的字，一般就是那种请输入姓名类似的

autofocus

光标自动放在指定位置

action

和form一起使用，在action中填写一个地址，将表单提交到哪个地址上去

 <form action="https://www.baidu.com/s" target="_blank">
   <input type="text" name="wd" value="html">
   <input type="submit" value="百度一下，你就。。。">
 </form>

href

link标签使用，a标签使用
href的协议头有https，mailto：等等

src

img标签使用，iframe标签适用
里面可以放网络地址和本地地址：本地地址分为绝对路径和相对路径

头部标签，放一些与页面相关的“元信息”
head里面写的都不会出现在页面上
里面可以放title标签
meta标签：可以设置网页的字符编码，一般使用utf-8编码，<meta charset="UTF-8" />，viewport设置移动端视口，还可以设置浏览器引擎 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
link标签引用外部资源（css，icon等等）
当然我们还可以在里面写style，script标签
base标签，页面中的相对地址相对于base这个href这个地址了

style

style既可以是属性，也可以是标签，style标签写在head里面

link

link元素是外部资源链接的元素，是一个单标签元素
这个可以在页面标签上加一个站点标题图标
但是现在的页面都不需要通过link的icon，而是在加载浏览器的时候会自动访问这个根域名的图标的地址，这个图标是一个固定的地址，类似于https://nodejs.org/favicon.ico
rel（relation）属性决定link标签的功能，指定链接的类型，shortcut是快捷方式的桌面图标，icon是浏览器的站点图标，stylesheet是CSS样式
href属性指定被链接资源的URL，URL可以是绝对的也可以是相对的

补充：dns是域名解析服务器，打开一个浏览器，输入一个域名，域名先通过DNS服务器，把它解析成ip地址，根据ip地址，找到对应的服务器，然后再把拿到的数据，返回给浏览器；从域名到ip，需要使用DNS 进行解析，这样是会花时间的，link的rel中有一个值叫dns-prefetch，这个可以免除dns解析的时间，提前就进行加载，从而提高性能

<link rel="shortcut icon" href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    type="image/x-icon">

marquee

 <marquee behavior="" direction="">跑马灯</marquee>

跑马灯

title

页面标签上的一句话，仅支持纯文本，如果不出现在head内，将自动移到head内，出现多个的话，仅有一个生效

h1-h6

header标题标签，h1-h6的区别是通过css改变的
比较传统的观点认为一个页面只能出现一个h1标签，原因是为了SEO
SEO是search engine optimism搜索引擎优化，就是如何布置页面能让页面在搜索结果中尽量考靠前，也就是所谓的获得更多的流量。这样就能通过h1标签里的内容，就知道要搜索的时候什么东西了。但是现在已经不用了

hgroup

如果一个内容有两三个标题，需要把不同级别的标题展示在一起的时候，就可以用这个标签把h1~h6标签归类
一般来说，这个标签可以替换以前使用的div的场景

p

写一个段落，使用p标签
lorem：生成假文

a

表示一个链接，有个属性叫href，里面写上地址就可以了（reference：引用，指向）
target属性可以控制是否跳转到新页面，如果两个连接的target属性的值是一样的，那么他们都会跳转到同一个新的页面
相对路径：不以斜杠或者协议开头的就是相对路径，类似于href="foo/bar/a.html",拼接方法是先将最后一个斜杠的后面的地址去掉，然后拼上href中的地址，因为相对地址总是相对于文件夹的，最后一个斜杠后面的地址是文件，而不是文件夹。
绝对路径：一个完整的路径，类似于https://baidu.com/,如果href以两个斜杠开头，只是省略了前面的协议；如果以一个斜杠开头，拼接方法就是当前页面的第一个单斜杠后面替换掉
#跳转（通过#id）
电子邮件<a href="mailto:aaa@bbb.com?title=1&subject=2&content=3">点我发邮件</a>
手机 <a href="tel:15566868296">点我打电话</a>
qq/淘宝临时会话：<a href="tencent://85180586></a>"

a元素里面可以设置img元素，可以实现点击图片进行跳转

img

表示一张图片，用src属性表示图片的路径
可以设置宽高，这样会避免加载页面的时候突然文字部分就变成图片的情况（width，height）

span

没有一个明确的语义，是行内标签

div

没有明确的语义，是块级标签，与span唯一的区别是div可以实现自动换行

br

换行标签

hr

水平分割线

base

base标签是放在head里面的，主要有href属性和target属性
页面中的相对地址相对于base这个href这个地址了
这个会影响a标签的路径，a标签把base看作相对路径
< base href=“https://baidu.com/s” />

em

行内标签
斜体（并没有加粗）
语义为强调

strong

粗体强调
语义为更强调，比em更强调一些

b

blod
只是样式上的加粗

u

下划线

i

斜体，一般编辑器（如word）的斜体按钮激素hi用的一个斜着的I图标来表示

pre

pre formatted，表示有预定义格式的文本
在pre标签里打空格或者回车，在页面渲染的时候就会有空格显示，里面的内容的回车跟空格都会被保留。
往往配合code标签使用，就会保持原来的样子

ul，ol，li

开发的时候，很多都清除默认样式

ul,ol,li{
	margin:0;
	padding:0;
	list-style:none;
}

ul：无序列表

<ul>
   <li>a</li>
   <li>b</li>
   <li>c</li>
 </ul>

在这里插入图片描述

ol：有序列表

 <ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
 </ol>

在这里插入图片描述

dl，dt，dd

  <dl>
    <dt>导演</dt>
    <dd>李安</dd>
    <dd>Lee An</dd>
  </dl>

在这里插入图片描述

form

里面放可交互的标签
有一个action属性

 <form>
    姓名: <input type="text">
    <br>
    年龄: <input type="number">
  </form>

input

input 的 type决定input 的类型
text，number，password，checkbox，radio（单选框）（如果只让选择一个，就取相同的name属性，通过name分成一组），file（有一个accept属性，表示这个文件选择框只接受什么类型，”multiple属性这个属性可以选择多个文件，如果不加这个属性只能支持一个文件“），button（需要配合js使用）,submit（可以提交），image（可以点的一张图片，需要配合js使用），reset(重置),email,date,range(max,min,step属性)，hidden，email，date，datetime-local,url,week，color

	<input type="file" accept=".jpg">
	<input type="checkbox" checked>
    <input type="radio" name = "gender">
    <input type="radio" name = "gender">
    <input type="radio" name = "gender">

button

type属性：button，submit，reset
input上的button只能在按钮上显示纯文字，而button标签可以在按钮上显示其他内容，比如图片，文字可以设置不同颜色等

label

配合checkbox，radio属性，实现点男也可以选择radio,相当于扩大点击范围
for属性是和input标签的id关联起来
如果用label包裹住，就不需要id和for属性了，空格问题也不需要担心了

<input type="radio" name="gender" value="male" id="gender-male"><label for="gender-male">男</label>

 <label>
     <input type="radio" name="gender" value="female"> 女
   </label>

 <label> <input hidden type="file">选择文件</label>

select

在这里插入图片描述

下拉选框
杭州相当于外部值，其实选的是value：0571，如果没有value，选的是option的那个名字（杭州）
selected属性：默认被选中
disabled属性：无法选中
hidden：在下拉框里不出现
如果option太多的话，会跑到页面的外面

 城市：<select name="city" >
     <option value="0571">杭州</option>
     <option value="021">上海</option>
     <option value="026" selected disabled hidden>成都</option>
   </select>

在这里插入图片描述

如果选项比较多的话，可以对选项进行分组，通过optgroup标签实现
有一个label属性，如图所示
mutiple属性可以实现多选，size属性是一次显示多少个option

 城市：<select name="city" mutiple size=6 >
     <optgroup label="华东">
        <option value="0571">杭州</option>
       <option value="021">上海</option>
       <option value="026" selected disabled hidden>成都</option>
     </optgroup>
   <optgroup label="西南">
     <option value="023" selected>成都</option>
     <option value="024">重庆</option>
   </optgroup>
   </select>

textarea

多行文本输入框
cols：列数
rows：行数
这个默认值不是写在value中，而是写在标签之间

  <textarea name="comment" cols="3" rows="10">
     hello
   </textarea>

fieldset

字段组，用来把一组输入域放在一起
field是字段的意思，就是说一个表单输入框
这个标签用来给输入域分组
如果是分组，完全可以用div等标签，但是fieldset有个disabled属性，可以将所有输入域都禁用

 <fieldset>
     <legend>个人信息</legend>
     城市：<select name="city">
     <optgroup label="华东">
        <option value="0571">杭州</option>
       <option value="021">上海</option>
       <option value="026" selected disabled hidden>成都</option>
     </optgroup>
   <optgroup label="西南">
     <option value="023" selected>成都</option>
     <option value="024">重庆</option>
   </optgroup>
   </select>
   <textarea name="comment" cols="3" rows="10">
     hello
   </textarea>
 </fieldset>