HTML

kevin

发表：2019-04-22 17:04:00

修改：2024-10-13 21:12:40

HTML标签介绍

标签的格式:
<开始标签名>内容</结束标签名>----------这个整体叫元素
标签名大小写不敏感
标签拥有自己的属性
基本属性:
. bgcolor="red" 背景颜色
事件属性:
. onclick="alert('你好!')" 点击弹窗

无序列表-------用的比较多
1. ul标签就是无序列表 -----全称unorderlist
  
  <ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  </ul>
2. <li></li>列表项------全称list item
3. list-style:none; css样式,去除修饰
4. type属性------可以修改列表项前面的符号
<ul type="none"><li>去掉符号</li></ul>
有序列表---------全称orderlist
1. ol标签
  
  <ol>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  </ol>
2. <li></li> 列表项------全称list item

img标签-------显示图片

src属性设置图片路径
相对路径:
1. (一个小点) . 表示当前文件所在的目录
2. (两个点) .. 表示当前文件所在的上一层目录
3. 文件名表示当前文件所在的目录的文件,相当于 ./ 文件名
绝对路径
1. http://ip:port/工程名/资源路径
2. width属性设置图像的宽度
  1. 后面写数值
3. height 属性定义图像的高度
  1. 后面写数值
4. border属性设置边框
  1. 后面写数值
5. alt属性设置指定路径找不到时,图片无法显示时的替代文本
  1. 后面写提示文字
6. title属性设置将鼠标放在图片上出现的文字提示
  1. <img src="../img/1.jpg" width="100" height="128" alt="图片不见了">

table表格标签-----------重点

tr标签,表示一行-----全称table row
align 单元格内容的水平对齐方式
left 左、right 右、center 居中
td标签.表示一个单元格,定义列 table data
合并单元格-------------------次重点
colspan 单元格可横跨的列数。
rowspan 单元格可竖跨的行数。
align属性设置单元格文本对齐
th标签,表示表头,单元格内的内容默认居中、加粗 table heard
table标签表示表格
1. border属性,表格边框的宽度。
2. width 属性设置表格的宽度。如果使用百分比,表格随着网页的大小而变化
3. height属性设置高度
4. align属性设置表格相对于页面的对齐方式
5. bgcolor属性设置表格的背景颜色
6. cellspacing 单元格边线之间的的距离。
7. cellpadding 单元格内容与单元格边线之间的距离。
8. border-collapse:collapse css样式,边框合并
```
<table align="center" border="1" width="300" height="300">
     <th>我是表头</th>
     	 <tr>
     	    <td>我是表格</td>
     	    <td>我是表格</td>
     	    <td>我是表格</td>
     	</tr>
</table>
```

快捷键

快速生成多行多列:

tr*行数>td*列数

iframe框架标签(内嵌窗口)

<iframe src="地址" width="500" height="400" name="abc" ><iframe/>
在页面上开辟一个小区域显示一个单独的页面
name属性定义名称
a标签target属性可以定义为iframe标签name属性的值,跳转到内嵌窗口
- <a href="地址" target="abc">跳转到窗口</a>

语义化标签

address标签
- 拥有者的联系信息
header标签
- 标题部分
main标签---------一个页面只能有一个
- 主题部分
section标签
- 文档的某个区域
footer标签
- 页脚联系方式部分
nav标签
- 导航链接
strong标签
- 用于强调文本

figure标签

用作文档中插入图片

figcaption标签.图像标题

<figure>
  <img loading="lazy" src="img_pulpit.jpg" width="304" height="228">
  <figcaption>我是图片标题</figcaption>
</figure>

表格列表----------definelist
- dl标签-------定义列表
- dt标签--------定义项目,类似表头
- dd标签---------项目描述
```
<dl>
    <dt>列表头</dt>
    <dd>列表元素</dd>
    <dd>列表元素</dd>
    <dd>列表元素</dd>
</dl>
```

表格语义化

caption标签,表格的标题---不是表头
thead标签,表头
tbody标签.表格主体内容
tfoot标签.表格的页脚
td, th标签的scope属性
- 标识某个单元是否是列、行、列组或行组的表头
- scope="col" 单元格是列的表头。
- scope="row" 单元格是行的表头

<caption>表格标题</caption>
<table border="1">
  <thead>--------------表头
    <tr>
      <th scope="col">Month</th>
      <th>Savings scope="col"</th>
    </tr>
  </thead>
  <tbody>------------表格主体
    <tr>
        <td scope="row">1</td>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
        <td scope="row">2</td>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>--------------表格页脚
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

其他标签

div 块级元素标签
- 霸占屏幕的一行, 就是页面中的一个行
- 配合CSS样式表使用
span 行级元素标签
- 不会占屏幕一行
- 长度是元素的长度
- 配合CSS样式表

其他属性

border-radius 可以添加圆角边框
- 值可以为px或者百分比
em和rem相对单位长度
- em大小基于元素字体,跟随父元素的font-size值改变

表单标签---------重点

表单标签
收集浏览器用户进行输入的数据, 并把数据发送到服务器端
- action：表示用户输入的内容, 被发送到服务器端的路径,没有路径写"#"
- method：表单数据发送方式。常用的取值：GET、POST
- 服务器只能获取有name属性的标签
- 单选和复选(option标签) 需要添加value属性,服务器才能收到值
<form action="#" method="get"></form>
文本输入框
- <input> 标签用于获得用户输入信息
- 属性
  - type="text"
    name：发送给服务器的名称,其实就是给文本取名字
    value="文本框的默认值"
    placeholder="输入框预期值的提示信息"
  - required 必填项
  - checked 默认选中,复选框和单选框
- <input type="text" value="" placeholder="请输入用户名" name="user"/>
密码输入框
- type="password"
  placeholder="输入框预期值的提示信息"
  name：发送给服务器的名称
- <input type="password" placeholder="请输入密码" name="pass"/>
单选按钮
- type="radio"
  name="定义名字",name相同的单选按钮才可以保证单选
  checked="checked" 默认选中属性, 需要注意: 属性很特别,属性名和属性值一样,固定写法
  value="值" 这样就可以通过name拿到value的值,发给服务器
- 每一个单选按钮都应该嵌套在它自己的 label（标签）元素中
- 在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同
- <input type="radio" name="gender" checked="checked" value="男"/>男
  <input type="radio" name="gender" value="女"/>女 <br/>
复选按钮
- type="checkbox"
  checked="checked" 默认选中属性,一般不用加
  value="值" 这样就可以通过name拿到value的值,发给服务器,
- 所以还得加上一个name="hobby"
- 每一个复选框都应该嵌套在它自己的 label（标签）元素中。
- 在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同
- <input type="checkbox" checked="checked" name="hobby" />抽烟
  <input type="checkbox" name="hobby"/>喝酒
  <input type="checkbox" name="hobby"/>打牌 <br />
文件域
- type="file" 文件上传服务器
- <input type="file" />
隐藏域
- type="hidden" 隐藏文本框
- 需要发送某些信息,不需要用户看见或者参与,使用隐藏域
- <input type="hidden" name="abc" value="agcvalue">
按钮
- 普通按钮
  - type="button"
    value="按钮上显示文本"用于配合后面的技术JavaScript
  - <input type="button" value="点我提交"/>
- 重置按钮
  - type="reset"
    - <input type="reset" />
- 提交按钮
  - 表单数据发送到服务器提交按钮: 属性
  - type="submit"
  - <input type="submit" />
- 图片按钮
  - type="image"
  - <input type="image" src="img/btn.jpg"/>
下拉列表
- <select> 下拉列表,可以进行单选或多选。需要使用子标签<option>指定列表项
- name：发送给服务器的名称
  multiple属性：取值为“multiple”表示多选.一般不写
  size属性:展示多少条信息
- 子标签：属于下拉列表中的一个选项（一个条目）
  - selected ：默认选中当前列表项
    value ：发送给服务器的选项值
  - option中设置的value其实就是select的value属性值
文本域
- <textarea rows="10" cols="20">这里是默认值</textarea>
- rows属性,可以显示几行的高度
- cols属性,每行可以显示几个字符的宽度
服务器提交方式GET和POST区别
- GET:表单提交的参数,放在浏览器地址栏, 暴露敏感数据
- POST:表单提交的参数,不会显示在地址栏上; 不会暴露敏感信息; 没有数据大小的限制

CSS层叠样式表

语法结构:

选择器{
    属性名:属性值;
    属性名:属性值;
}

选择器: 指定对HTML的哪个标签起作用

CSS引入方式

行内样式
- 在HTML标签中添加属性 style="属性:属性值"
- 作用域最小,作用于当前标签; 行内样式的优先级最高
- <h3 style="color: red;">h3标签</h3>
内部样式
- 写在中, 使用标签 style , 属性: type="text/css"
- 作用是当前整个页面有效

<style type="text/css">
            h3{
                color: chocolate;
            }
        </style>

外部样式
- CSS样式定义在另一个文件中,后缀名.css (文本文件)
- 引入样式表, 使用link标签写在head中
  属性: href="css文件路径"
  type="text/css"
  rel="引入的文件和当前页面是什么关系" 样式表
优先级
- 三种引入方式优先级:就近原则
  如果有行内样式,就先执行行内样式
  如果没有行内样式,后面的会把前面的样式覆盖掉

CSS选择器

选择器就是对HTML标签设置样式作用

标签选择器
- 标签元素选择器用HTML标签名称作为选择器
- 按标签名称分类，为页面中某一类标签指定统一的CSS样式。
```
 标签名 {
       属性1:属性值1; 
       属性2:属性值2; 
       属性3:属性值3;
    }
```
ID选择器
- id选择器使用“#”进行标识，后面紧跟id名
- html标签上,添加属性id="选择器名", 配合ID选择器进行使用
- ID具有唯一性
```
#id名 {
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3; 
  }
```
class选择器
- 类选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名其
- html标签上,添加属性class="选择器名", 配合class选择器进行使用
```
.类名 {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3; 
 }
```
选择器的优先级:
- id选择器>类选择器>标签选择器
使用多个class,用空格隔开
```
<img class="test1 test2"/>
```

CSS常用属性

边框属性
- border
```
div{
    border:宽度(高度) 样式 颜色
      }
```
- 宽高度
  - width、height：用于设置边框的宽度、高度。单位px(像素)
- 样式取值：
  - solid 实线，none 无边，double 双线等
字体属性
- font-size:文本大小
- font-family: 字体
- text-align 文本对齐
- color: 颜色
```
div{
   font-family: 楷体;
   font-size: 32px;
   color: red;
  }
```

背景属性

background-color 背景色

background-image 背景图

属性: url(图片地址)

div{
width: 200px;
 height: 200px;          
 background-image: url(img/btn.jpg);
background-color: blue;
}

盒子模型
- HTML页面中的元素看作是一个矩形的盒子
- 由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
- margin----------边框与边框之间的距离------看上不看下,看左不看右
  - margin-top
    margin-right
    margin-bottom
    margin-left
- padding-------元素边框与元素内容之间的距离
  - padding-top
    padding-right
    padding-bottom
    padding-left
- 多属性值使用:
  - margin: 50px; 上下左右
  - margin: 10px 50px; 上下 10 , 左右50
  - margin: 10px 20px 30px; 上10 ,左右20, 下30
  - margin: 10px 20px 30px 40px; 顺时针上右下左
  - margin: 0 auto; 上下0, 左右距离自动调整(居中)

声明优先级

引用外联样式<内联样式<class顺序<id选择器优先级<行内样式<!important关键字
内联和外联谁后引用,就先,顺序执行
内联样式
- 在 <style> 标签里面声明的 class 顺序十分重要，之后的声明会覆盖之前的声明
  
  顺序执行!!
- 和应用类声明无关,和顺序声明有关
```
<style>

  .pink-text {

 color: pink !important;

  }

</style>
```

自定义的 CSS 变量

在变量名前添加两个连字符号，并为其赋值即可
- ```
--penguin-skin: gray;
background: var(--penguin-skin, black)
第一个参数是调用自变量,第二个参数是备用颜色
```
- CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承

HTML

HTML标签介绍

标签

标题标签:

超链接-------------重点

列表标签

img标签-------显示图片

table表格标签-----------重点

iframe框架标签(内嵌窗口)

语义化标签

其他标签

其他属性

表单标签---------重点

CSS层叠样式表

CSS引入方式

CSS选择器

CSS常用属性

声明优先级

自定义的 CSS 变量