HTML属性，标签

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;
}
1
2
3
4
5

• ul：无序列表

<ul>
   <li>ali>
   <li>bli>
   <li>cli>
 ul>
1
2
3
4
5

• ol：有序列表

 <ol>
   <li>ali>
   <li>bli>
   <li>cli>
 ol>
1
2
3
4
5

dl，dt，dd

  <dl>
    <dt>导演dt>
    <dd>李安dd>
    <dd>Lee Andd>
  dl>
1
2
3
4
5

form

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

 <form>
    姓名: <input type="text">
    <br>
    年龄: <input type="number">
  form>
1
2
3
4
5

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">
1
2
3
4
5

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>
1

 <label>
     <input type="radio" name="gender" value="female"> 女
   label>
1
2
3

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

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>
1
2
3
4
5

• 如果选项比较多的话，可以对选项进行分组，通过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>
1
2
3
4
5
6
7
8
9
10
11

textarea

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实体（转义符）

• < ; span>这个就相当于< span >
• 语法是& xxx；
• 小于号 : & lt;
• 大于号 : & gt;
• 双引号： & quot;
• 单引号： & apos;
• 空格 ： & nbsp;(注意一下这个空格是160号的空格，不是32号的空格)
• & ： & amp;

DevTools

• esc键：控制抽屉，里面打一些代码，例如$0.value
  
• 左面指哪打哪，右面选择手机

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「 亚太地区百大最帅面孔第101名」的原创文章