html5+css3笔记

博博915

已于 2022-07-14 20:33:22 修改

阅读量366

点赞数 1

分类专栏：笔记文章标签：大数据

于 2022-07-14 20:29:05 首次发布

本文链接：https://blog.csdn.net/weixin_56393766/article/details/125792241

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、网页的优点

不需要安装
无需更新
跨平台

网页中使用的语言： HTML、CSS、

二、浏览器

前端工程师负责编写网页的源代码，浏览器负责将网页渲染成我们想要的样子；

三、W3C（万维网联盟）

w3c的出现为了制定网页开发的标准，以使同一个页面在不同的浏览器中有相同的效果。

四、网页的结构

根据W3C的标准，一个网页主要由三部分组成：结构、表现和行为。

结构：HTML用于描述页面的结构；
表现：CSS用于控制页面中元素的样式；
行为：JavaScript用于响应用户操作；

五、HTML (Hypertext Markup Language)

它负责网页的三个要素中的结构；
HTML使用标签的形式来标识网页中的不同组成部分；
超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面；

六、标签

<html lang="en">  //一个根标签
    <head>  //根标签包含一个head标签和一个body标签  
    </head>    
    <body>
    </body>
</html>

属性

在开始标签或自结束标签可以设置属性；

属性是一个名值对；
属性用来设置标签中的内容如何显示；

<h1>我的<font color="yellow">第一个</font>网页</h1>

七、文档声明

文档声明用来告诉浏览器当前网页的版本；

//html5的文档声明；
<!DOCTYPE html>

八、字符编码

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外；所以一段文字在存储到内存中时，都需要转换为二进制编码。

编码： 将字符转换为二进制码的过程称为编码;
解码： 将二进制码转换为字符的过程称为解码;
字符集(charset)： 编码和解码所采用的规则称为字符集;
常见的字符集：
- ASCII
- ISO88591
- GB2312
- GBK
- UTF-8 (在开发时我们使用的字符集都是UTF-8)

通过meta标签来设置网页的字符集，避免乱码问题；

<meta charset="UTF-8">

九、文档使用

<!DOCTYPE html>
<!--html的根标签，网页中的所有内容都要写在根元素里面-->
<html lang="en">  <!-- 语言设置 -->

<!--head是网页头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
<head>
    <!-- meta标签用来设置网页元数据，这里meta用来设置网页的字符集，避免乱码问题   -->
    <meta charset="UTF-8">
    <!--title中的内容会显示在浏览器标题栏-->
    <title>Title</title>
</head>

<!--body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里-->
<body>
<!--网页的一级标题-->
<h1>我的<font color="yellow">第一个</font>网页</h1>
</body>
</html>

十、实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格；

如果我们需要在网页中书写特殊字符，需要使用html中的实体（转义字符）；
实体的语法

&实体的名字；
- &nbsp；空格
- &gt；大于号
- &lt；小于号
- &copy；版权符号

十一、meta标签

charset：指定网页的字符集；
name：指定的数据的名称；
content：指定的数据的内容；
keywords：表示网站的关键字；

页面重定向；

<meta http-equiv="refresh" content="3;url=https://www.baidu.com"> //3秒后页面跳转

十二、语义化标签

1. 常用标签

在用html标签时，应该关注的是标签的语义，而不是它的样式；

标题标签
- h1-h6一共有六级标签，重要性递减；
- 一般情况下一个页面只有一个h1
块元素
- 在页面中独占一行的元素成为块元素；（block element）
- 在网页中一般通过块元素来对页面进行布局；
行内元素
- 在页面中不会独占一行的元素称为行内元素（inline element）
- 行内元素主要用来包裹文字；
p标签

p标签标表示页面中的一个段落，也是一个块元素；
hgroup

标签用来为标题分组，可以将一组相关的标题同事放入到hgroup；
em

em标签用于表示语音语调的一个加重；不会独占一行；
strong

strong表示强调；
blockquote

表示一个长引用，换行显示；
q

表示一个短引用，不独占一行；
br

用于换行

2. 行内元素和块元素

块状元素

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

在网页中一般通过块元素来对页面进行布局。

块状元素特征：

能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下

行内元素

行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

行内元素特征：

设置宽高无效；
对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间；
不会自动进行换行；

关于display的几个属性

inline
1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2. 不能更改元素的height，width的值，大小由内容撑开.
3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
block
1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block
1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2. 用通俗的话讲，就是不独占一行的块级元素.

3. 布局标签（结构化语义标签）

header：表示网页的头部；
main：表示网页的主体部分；
footer：表示网页的底部；
nav：表示网页中的导航；
aside：和主体相关的其他内容；（侧边栏）
article：表示一个独立的文章；
section：表示一个独立的区块；
div：没有语义，用来表示一个独立的区块，当前还是主要的布局元素；
span：行内元素，没有任何的语义，一般用于在网页中选中文字；

4. 列表标签

在html中也可以创建列表，html列表一共有三种：

有序列表
- 有序列表，使用ol标签来创建有序列表，使用li表示列表项
无序列表
- 无序列表，使用ul标签来创建无序列表，使用li表示列表项
定义列表
- 定义列表，使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明；

5. 超链接

基础

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置；
超链接是一个行内元素；
使用 a 标签来定义超链接：
- 属性：href
  - 指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址
- 属性：target
  - _self(默认值) 在当前页面中打开超链接， _blank 在一个新的要么中打开超链接

 <a href="https://www.baidu.com" target="_blank">超链接</a>

使用超链接回到顶部

可以直接将超链接的href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置；
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值；

 <a href="#">回到顶部</a>
 <a href="#p3">去第三个自然段</a>

点击超链接什么也不会发生

可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生。

 <a href="javascript:;">这是一个新的超链接</a>

6. 图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片。

img标签是一个自结束标签；
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

常用属性

src：指定的是外部图片的路径（路径规则和超链接是一样的）
alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录；
width：图片的宽度 (单位是像素)
height：图片的高度；宽度和高度中如果只修改了一个，则另一个会等比例缩放

一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）。

base64文件格式

将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片；

一般都是一些需要和网页一起加载的图片才会使用base64；

7.iframe（内联框架）

内联框架，用于向当前页面中引入一个其他页面，src 指定要引入的网页的路径，frameborder 指定内联框架的边框；

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

HTML(补充)

一、表格简介

在网页中我们也需要使用表格，我们通过table标签来创建一个表格；

在table中使用tr表示表格中的一行，有几个tr就有几行；
在tr中使用td表示一个单元格，有几个td就有几个单元格；
rowspan 纵向的合并单元格；
colspan 横向的合并单元格；

<table border="1" width='50%' align="center">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td rowspan="2">D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <td colspan="2">C4</td>
        </tr>
</table>

长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

<table border="1" width='50%' align="center">
    <thead>
    <tr>
        <th>日期</th>
        <th>收入</th>
        <th>支出</th>
        <th>合计</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2000.1.1</td>
        <td>500</td>
        <td>200</td>
        <td>300</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td></td>
        <td></td>
        <td>合计</td>
        <td>300</td>
    </tr>
    </tfoot>
</table>

二、表格的样式

border-spacing: 指定边框之间的距离；

border-spacing: 0px; //此时会出现两个1像素边框合并后为2像素；

border-collapse: 设置边框的合并；
```
 border-collapse: collapse;
```
tr不是table的子元素

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中。

将元素设置为单元格 td (以后尽量不要再用表格布局)

.box1{
    width: 300px;
    height: 300px;
    background-color: orange;

    /* 将元素设置为单元格 td  */
    display: table-cell;
    vertical-align: middle;
}

三、表单

在网页中使用表单，网页中的表单用于将本地的数据提交给远程的服务器；
使用form标签来创建一个表单；

form的属性

action表单要提交的服务器的地址；
文本框、密码框：数据要提交到服务器中，必须要为元素指定一个name属性值；
单选按钮：必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器；
checked 可以将单选按钮设置为默认选中；
多选框：可以同时选中多个；
下拉列表：使用select

<form action="target.html">
    文本框 <input type="text" name="username">
    <br><br>
    
    密码框 <input type="password" name="password">
    <br><br>
    
    单选按钮 <input type="radio" name="hello" value="a">
    <input type="radio" name="hello" value="b" checked>
    <br><br>
    
    多选框 <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3" checked>
    <br><br>

    <!-- 下拉列表 -->
    <select name="haha">
        <option value="i">选项一</option>
        <option value="ii">选项二</option>
        <option value="iii" selected>选项三</option>
    </select>
    <br><br>
    
    <!-- 提交按钮-->
    <input type="submit" value="注册">
</form>

提交、重置、普通按钮的表示

<input type="submit">

<!-- 重置按钮 -->
<input type="reset">

<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
        
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>