HTML+CSS复习（一）_html和css的全面复习-优快云博客

本文链接：https://blog.youkuaiyun.com/Meg_Fu/article/details/128463404

一、兼容问题

Can I use网站查询

二、HTML的基本语法

双标签
<标记></标记>

单标签
<标记/>

基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三、文档声明与字符编码

<html lang="en">

en 英文
ja-jp 日文
zh-CN 中文

<meta charset="UTF-8"> /*万能码*/

编码类型

四、常用标签

1、文本标签（h1-h6）
2、段落标签<p></p>
3、换行标签<br/>
4、水平线<hr/>
5、加粗<b></b>和<strong></strong>
6、倾斜<em></em>和<i></i>
7、删除<s></s>和<del></del>
8、扩展<u></u>下划线<sub></sub>下标<sup></sup>上标

<hr/>

<hr color="red">
<hr color="red" width="300">
<hr color="red" width="300" align="left">

<hr noshade> <!--去阴影-->

五、特殊符号

在这里插入图片描述

六、`<div>`与`<span>`标签

div（块）∶
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

七、有序列表

<ol>、<li> ：列表的最外层容器、列表项
（有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。）
1.li里面可以随意放标签，但是ol里面只能放li，
2.数字是自动生成的。
3.type属性：改变前面标记的样式（一般是用CSS去控制）
4.start只能跟数字

<body>
    <ol type="A" start="2">
       <li>第一项</li>
       <li>第二项</li>
    <ol>
</body>

八、无序列表

<ul>、<li> ：列表最外层容器、列表项
（ul和li必须是组合出现的，他们之间是不能有其他标签的。）

<body>
    <ul>
       <li>第一项</li>
       <li>第二项</li>
    <ul>
</body>

九、定义列表

<dl> ：定义列表
<dt> ：定义专业术语或名词
<dd> ：对名词进行解释和描述

<dl> 
   <dt>HTML</dt>
   <dd>超文本标记语言</dd>
</dt>

十、图片标签的路径

图片标签（单标签）：<img src="" alt="">

1.相对路径
“.” 在路径中表示当前路径
“…” 在路径中表示上一级的路径

2.绝对路径
磁盘详细地址或网页详细地址

十一、图片标签的属性

图片标签（单标签）：<img src="" alt="">
src : 图片网页地址
alt : 当图片出现问题时可以给用户提示
title : 一张图片的提示信息
width、height : 图片大小

十二、超链接标签

1.<a>(双标签)：<a></a>
href属性：连接的地址
target属性：可以改变链接打开的方式
默认情况下:是在当前页面打开 _self ,新窗口打开_blank

2.<base>(单标签)：
改变链接默认行为

<a href="路径" title="鼠标悬停上去后的提示信息" target="规定在何处打开文档">内容</a>

<a>标签可以包裹图片标签

十三、表格

<table> ：表格的最外层容器
<tr> ：定义表格行
<th> ：定义表头
<td> ：定义表格单元
<caption> ：定义表格标题
table>tr个数>td个数
（快速创建）

十四、表格属性

width ：宽度
height ：高度
border :表格边框
bgcolor ：背景颜色
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
align ：左右对齐方式 (left、center、right)
valign :上下对齐方式 (top、middle、bottom)

十五、tr属性

height ：高度
bgcolor ：背景颜色
align ：左右对齐方式 (left、center、right)
valign :上下对齐方式 (top、middle、bottom)

十六、td属性

width ：宽度
height ：高度
bgcolor ：背景颜色
align ：左右对齐方式 (left、center、right)
valign :上下对齐方式 (top、middle、bottom)

十七、表格合并

rowspan ：合并行
colspan ：合并列

<td rowspan="2"></td>

十八、表单标签

<form> ：表单的最外层容器
<input> ：标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框、复选框等。

<form method="get或post"action="向何处发送表单数据">

<body>
    <form action="输入一个网址等">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名sir">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked>碎冰冰
        <!-- checkbox为默认选中 -->
        <input type="checkbox" disabled>旺旺碎冰冰
        <!-- disabled禁止选中 -->
        <h2>单选框</h2>
        <input type="radio" name="gender">要
        <input type="radio" name="gender">不要
        <!-- 用name来使选择在同一组 -->
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

十九、CSS内部样式表

内部样式
在<style>标签内添加的样式

<style>
        div{ width:100px;height:100px;background-color:red }
</style>

二十、CSS外部样式表

<link>标签
（通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。）
rel（link的rel属性）
href
@import
在这里插入图片描述

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="编辑器（或文件夹）下的css文件名">
    <title>Document</title>>
</head>
<body>
    <div>块</div>
</body>

扩展知识点:link和import之间的区别?

差别1:本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式。

差别2∶加载顺序的差别:当一个页面被加载的时候（就是被浏览者浏览的时候),link引用的CSs会同
时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

差别3∶兼容性的差别:@import是CSS2.1提出的，所以老的浏览器不支持,@import只有在IE5以上的
才能识别,而link标签无此问题。

二十一、CSS行内样式表

内联(行内、行间)样式
在html标签上添加style属性来实现的