HTML总结

weixin_43157116

已于 2022-04-25 10:26:22 修改

阅读量60

点赞数

文章标签： java html5

于 2022-04-16 11:26:23 首次发布

本文链接：https://blog.csdn.net/weixin_43157116/article/details/124188978

版权

1.HTML结构

1.1HTML文件基本结构

<html>
    <head>
        <title>我的第一个标题<title>
    <head>
    <body>
        内容
    <body>
<html>

html代表根标签，只能存在一个。
head标签中的内容不会出现在网页中，主要用来帮助浏览器解析网页，如meta标签用来设置字符集（避免出现乱码）；title标签用来显示整个网页的标题。
body标签是head的兄弟标签，表示网页的主体，网页中可见的内容都应该写在body

1.2VScode中使用HTML的快捷键

使用！+tab快速生成

2.基本常识

2.1编码和解码

例如：中国->1101010010 编码：将字符转为二进制的过程称为编码

1101010010->中国解码：讲二进制字符转为字符的过程称为解码

所有数据在计算机中存储都是以二进制形式进行存储，文字也不例外。

2.2字符集

编码和解码所采用的规则称为字符集（比如a-1,b-2,c-3..)

乱码问题：

-如果编码和解码所采用的字符集不同就会出现乱码问题（比如用共产党的密码本加密，再用国民党的密码本解密）

-长见字符集：

ASCII（美国7位）

IS088591(欧洲8位）

GB22312

GBK

UTF-8（万国码-包含全部）

3.HTML常见标签

3.1head中的标签

meta标签:主要设置网页中的一些元数据，元数据不是给用户看的。其中包含的属性有：charset 指定网页的字符集；name指定数据名称；content：指定数据内容。

如京东:<meta name="keywords" content="网上购物，网上商城，家电，手机，电脑，舒装,食品，生鲜>

title标签：内容会作为搜索结果超链接的文字显示。

3.2body中的标签

3.2.1标题标签（块元素）

有六个，从h1-h6重要性依次递减，可以使用hgroup标签进行分组。

3.2.2段落标签（块元素）

<p>我是一个段落<p>

3.2.3格式化标签

描述	标记
加粗	<strong>...</strong>
倾斜	<em>...<em>
删除线	<del>...</del>
下划线	<ins>...</ins>

3.2.4换行标签

3.2.5布局标签

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

3.2.6列表

无序列表：ul标签来创建无序列表，li表示列表项
有序列表：ol标签来创建有序列表，li表示列表项
定义列表：dt标签来创建定义列表

3.2.7超链接

href 必须具备，表示点击后会跳转页面
target默认是_self。如果是_blank则打开新的页面
id属性是元素唯一的表示，同一个页面不能出现重复id属性（每个标签可以添加一个id属性，利用id属性可以实现跳转）

    <a href="#bottom">回到底部</a>
    <a href="#p3">去第三个自然段</a>
    <a href="#">#占个位置，只是还没想好</a>
    <a href="javascript:;">点不动</a>
    <a href="10列表.html" target="_blank">超链接</a>
    <p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto labore sed illum, 
    natus a amet ad rerum perferendis cum non sapiente eius. Veritatis assumenda dolorem neque 
    explicabo reiciendis, quidem ab?</p>
    <a id="bottom" href="#">回到顶部</a>

3.2.8图片标签

使用img标签来引入一个外部图片,img标签是一个自结束标签，scr属性指定的是外部图片的路径（路径规则和超链接一样）， img这种元素属于替换元素（基于块和行内元素，具备两种元素特点），alt属性是对图片的描述，默认不显示，搜索引擎会根据alt属性中内容来识别图片， width 图片宽度（单位像素）， heght高度 ,如果修改其中一个另一个会等比例缩小。

    <img width="200" src="./path/其他图片/长大校徽.webp">

3.2.9内联框架

内联框架，用于在当前页面引入一个其他页面。

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

3.2.10音乐

audio标签可以从外部引入一个音频文件，音频文件引人时，默认情况不容许用户自己控制

属性： controls容许用户控制；

autoplay音频文件是否自动播放，但目前大部分来讲大部分浏览器都不会自动播放（影响体验）；

loop循环播放；

<audio src="./music/1.令人震撼的电音鬼才【Ronald Jenkees】-【Guitar Sound】(Av5258068,P1).mp3 " controls loop ></audio>

除了通过src来指定外部文件路径外，还可以通过source来指定文件

 <audio controls>
        对不起，您的浏览器不支持播放器
        <source src="./music/">
        <source src="./music/"><!--上面的有问题会自动执行下一个，如果都有问题则执行文字-->

    </audio>

4.其他

4.1实体

如果在网页中书写这些特殊符号，则需要HTML中的实体（转义字符）

语法：

&nbsp-表示空格

&gt-表示大于号

&lt-表示小于号

&copy-版权符号

4.2注意事项

在网页中编写多个空格默认情况会被浏览器简析成为一个空格在HTML中有些时候，我们不能直接写一些特殊符号比如：多个连续空格，比如字母两侧的大于和小于号

2.CSS简介

2.1css的三种表现方式：

2.1.1第一种方式：

在标签内部通过style属性设置元素样式。

问题：使用内联样式，样式只能给一个标签生效，如果希望影响多个元素必须在每一个元素中都修改一遍样式发生变化时，我们必须要一个一个修改，非常不方便.

注意：开发时绝对不要使用内敛样式（不要把css和html混杂）

2.1.2第二种方式（内部样式）：

-将样式编写到head中的style标签

-通过css的选择器选中元素为其设置各种样式

-对所有指定元素都更改

-内部样式只能对一个网页起作用，

它里面的样式不能跨页面进行复用

2.1.3第三种方式（外部样式）：

外部样式开发时使用最多，可以将css样式编写到一个外部css文件中，然后通过link标签引入外部的css文件，不同网页可以复用。

<link rel="stylesheet" href="./style.css">

2.2css语法

选择器+声明块

选择器：通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中的所有p元素。

声明块：通过声明块来指定要为元素设置的样式，声明块由一个一个声明组成，声明是一个名值对结构（一个样式名对应一个样式值，名和值以:连接，以；结尾）

<head>
    <style>
        p{
            color:red;
            font-size:20ps;
    </style>
</head>
<body他
    <p>总有一天你会被他人照亮，也总有一天你会称为他人的光<p>
<body>

2.3css中的选择器

2.3.1元素选择器（类选择器）

<style>
    .red{
        color:red;
    }
<style>
<body>
    <p class="red">我是p标签</p>
    <h1>清风徐来</h1>
<body>

根据class属性选取

交集选择器：选中同时复合多个条件的元素，语法：选择器1.选择器2.选择器3{}

<style>
    .a.b.c{
        font-size:50px;
        }
    .aqua{
        color:aqua;
        }
    
</style>
<body>
    <p class="red a b c">我是p标签</p>
    <span class="aqua">我是span标签</span>
<body>

并集选择器：同时选中多个选择器对应的元素，逗号相当于或。

语法：选择器，选择器2，选择器3，选择器n{}

<style>
    h1,span,.red{
        color:aqua;
                }
</style>
<body>
     <h1>清风徐来</h1> 
    <span>我是span标签</span>
    <p class="red a b c">我是p标签</p>
</body>