1-HTML基础

诗人不写诗

已于 2023-04-12 12:21:33 修改

阅读量1.5k

点赞数

分类专栏： # HTML&CSS&JS 文章标签： html webview elementui

于 2022-04-30 14:43:00 首次发布

本文链接：https://blog.csdn.net/tales522/article/details/124508592

版权

HTML&CSS&JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML：Hyper Text Markup Language，超文本传输协议

一、HTML版本

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我会展示浏览器标签栏上，搜索引擎会检索我</title>
</head>

<body>

    <h1>我是一个标题</h1>
    <p>我是一个段落。</p>

</body>

</html>

0、<!DOCTYPE>用于声明使用的HTML版本，默认html表示html5，一定要写。
1、一个页面中有且只能有一个<html>标签，网页中所有内容都应该写在<html>标签中。
2、<head>标签中的内容不会在页面中显示，用来指定浏览器的行为。
3、<title>标签默认显示在浏览器标题栏中，搜索引擎会检索title中的内容。
4、<body>标签用来包含网页的主体内容，网页中所有可见的内容都应该写在body中。
5、<meta> 可以写多个

    <meta name="keywords" content="搜索引擎会收录我">

    <meta name="description" content="搜索引擎会收录我">

    <meta name="author" content="我是作者">

    <meta http-equiv="refresh" content="30">

    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">

二、HTML标签

HTML页面的组成全部由标签组成，标签通过标签名区分，标签通过属性设置其特点。通用的属性有：
id：用于唯一标识一个页面中中的标签
class：样式名
style：行内样式
title：描述标签额外属性

0、转义字符

格式：&xxx;
小于：<
大于：>
空格： 
版权：©

1、h1

Head，头部的意思

2、p

Paragraph，段落的意思

<p></p>

3、a

Anchor，锚点，一个固定的点。

<a></a>

<a href="https://www.wndland.cn">我是一个链接</a>

4、img

<img src="/images/logo.png" width="258" height="39" alt="图片不显示时显示我，不写我搜索引擎不会收录此img"/>
图片格式：
JPEG（JPG）：支持颜色多，可压缩，不支持透明，用于照片等图片
GIF：支持颜色少，支持简单透明，支持动态
PNG：支持颜色多，支持复杂透明，用于颜色复杂要透明的图

5、iframe

6、div，span

div会独占一行，没有语义，用于对页面进行布局。span是行内元素，主要用于选中文本，设置样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="background-color: red;">
        我是一个div
    </div>
    <span style="background-color: green;">
        我是一个span
    </span>
    <span style="background-color: blue;">
        我是一个span2
    </span>
</body>
</html>

效果如下：

7、ul，ol，li

ul：无序标签
ol：有序标签
li：列表项

8、

三、标签选择，类选择，id选择，批量选择，复合选择。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*标签选择器*/
        h1 {
            color: green;
        }

        /*id选择*/
        #tqs {
            color: darkgray;
        }

        /*类选择*/
        .dn {
            color: gold;
        }

        .dn1 {
            background-color: grey;
        }

        /*批量选择*/
        #tps,
        .dn1 {
            font-size: 30px;
        }

        /*交集选择*/
        #tps.dn1 {
            color: red;
        }
    </style>

</head>

<body>
    <h1>青花瓷</h1>
    <p id="tqs">天青色等烟雨</p>
    <p class="dn dn1 dn2">而我在等你</p>
    <p class="dn">炊烟袅袅升起</p>
    <p class="dn">隔江千万里</p>
</body>

</html>

效果如下：

四、后代选择器，子标签选择器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*后代选择器，用空格分隔*/
        div span {
            color: green;
        }

        div p span {
            font-size: 50px;
        }

        /*子元素选择*/
        div>span {
            background-color: black;
        }
    </style>
</head>

<body>
    <div>
        <span>我是div标签中的span</span>
        <p>
            <span>我是p标签中span</span>
        </p>
    </div>
    <span>我是body中的span</span>
</body>

</html>

效果如下：

五、伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*:link没有访问过的链接*/
        a:link {
            color: yellowgreen;
        }

        /*:visited访问过的链接*/
        a:visited {
            color: blueviolet;
        }

        /*:hover鼠标移入时*/
        a:hover {
            color: brown
        }

        /*点击后还没放开*/
        a:active {
            color: cyan;
        }

        /*鼠标移入*/
        p:hover {
            background-color: antiquewhite;
        }
        /*获取焦点*/
        input:focus{
            background-color: yellow;
        }
        /*选中*/
        span::selection{
            background-color: red;
        }
    </style>

</head>

<body>
    <a href="http://www.baidu1.com">没有访问过的链接</a><br><br>
    <a href="http://www.baidu.com">访问过的链接</a>
    <p>我是一个p</p>
    <input type="text"><br><br>
    <span>我是一个span</span>
</body>

</html>

六、伪元素选择

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style type="text/css">
        /*第一个字母*/
        p::first-letter {
            font-size: 40px;
        }
        /*第一行*/
        p::first-line {
            background-color: aqua;
        }
        /*前*/
        p:before {
            content: "我是css中写的content";
            color: red
        }
        /*后*/
        p:after {
            content: "我是css中写的content";
            color: gold
        }
    </style>
</head>

<body>

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

</html>

七、属性选择

<!DOCTYPE html>
<html lang="zh-CN">

<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>属性选择</title>
    <style>
        /*属性名等于*/
        p[title] {
            background-color: red;
        }

        /*属性值等于*/
        p[title="hello"] {
            background-color: gold;
        }

        /*属性值开头*/
        p[xg^="xx"] {
            background-color: aquamarine;
        }

        /*属性值结尾*/
        p[xg$="gg"] {
            background-color: bisque;
        }

        /*属性值包含*/
        p[xg*="tt"] {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <p title="hello">我是一个段落</p>
    <p title="我是title属性值">我是一个段落2</p>
    <p xg="xxdd">我是一个段落3</p>
    <p xg="hegg">我是一个段落4</p>
    <p xg="tt">我是一个段落5</p>
</body>

</html>

八、子元素选择，类型选择

<!DOCTYPE html>
<html lang="zh-CN">

<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>子元素选择</title>
    <style>
        /*第一个child，嵌套中的也算*/
        body>p:first-child {
            background-color: yellow;
        }

        /*最后一个child，嵌套中的也算*/
        p:last-child {
            background-color: gold;
        }

        /*第n个child，even偶数，odd基数*/
        p:nth-child(4) {
            background-color: aqua;
        }

        /*第一个类型为span*/
        span:first-of-type {
            background-color: blue;
        }

        /*最后一个类型为span*/
        span:last-of-type {
            background-color: brown;
        }
    </style>
</head>

<body>
    <p>我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <p>我是一个p标签3</p>
    <p>我是一个p标签4</p>
    <p>我是一个p标签5</p>
    <span>我是一个span</span><br><br>
    <span>我是一个span2</span>
    <div>
        <p>我是一个p标签6</p>
    </div>

</body>

</html>

九、兄弟元素选择

<!DOCTYPE html>
<html lang="zh-CN">

<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>兄弟元素选择</title>
    <style>
        /*选择span后紧挨的p*/
        span+p {
            background-color: rebeccapurple;
        }

        /*选择p后面的所有span*/
        p~span {
            background-color: aqua;
        }
    </style>
</head>


<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是一个span</span>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是一个span2</span><br>
    <span>我是一个span3</span>

</body>

</html>

十、否定选择

语法：:not()

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>否定伪类选择</title>
    <style>
        p:not(.hello) {
            background-color: red;
        }
    </style>
</head>

<body>
    <p class="hello">我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <p>我是一个p标签3</p>
    <p>我是一个p标签4</p>
    <p>我是一个p标签5</p>
</body>

</html>

十一、盒子模型，框模型

相邻元素的外边距不会相加，会取二者之间较大值。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        .box1 {
            /*
            内容区宽、高
            */
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /*
            边框
            */
            border-width: 10px;
            border-color: red yellow blue green;
            border-style: solid;
            /*
            内边距，没有背景色，使用的是内容区的背景色
            */
            padding-top: 40px;
            /*
            外边距是盒子与其他盒子的距离
            */
            margin-top: 100px;

        }

        .box2 {
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>

</body>

</html>

附录：英文全称对照表：

标签英文全称
a	anchor
b	bold
i	italic
br	break
u	underlined
div	division
span	span
ol	ordered list
ul	unordered list
li	list item
dl	definition list
dt	definition term
dd	definition description
h1~h6	header
p	paragraph
hr	horizontal rule
href	hypertext reference
alt	alter
src	source
nl	navigation lists
table	table
tr	table row
th	table header cell
td	table data cell
iframe	inline frame
tfoot	table foot
thead	table head
optgroup	option group