HTML5和CSS内容

最新推荐文章于 2024-06-18 16:37:00 发布

White66Hang

最新推荐文章于 2024-06-18 16:37:00 发布

阅读量129

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_59337864/article/details/126474495

版权

思维导图

在这里插入图片描述

HTML

什么是HTML

HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言（Hyper Text MarkerUp Language）
HTML不是编程语言，而是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页

网页由浏览器解析

IE
firefox火狐 flash中文
safari webkit 苹果
chrome webkit blink 谷歌（推荐）业界的标杆
Opera 手机端 blink
UC，360，QQ，搜狗，遨游，百度，2345

HTML标记标签通常称为HTML tag
HTML标签由成对出现的尖括号包围的关键词，比如
HTML标签通常是成对出现的，有例外，比如
标签对中第一个标签是开始标签，第二标签是结束标签
结束标签是由/结束的
开始和结束标签也被称为开放标签和闭合标签
什么是网页？
HTML文档描述的就是网页
HTML文档包含HTML的标签和纯文本
HTML文档就被称为网页
web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
浏览器不会显示HTML标签，而是使用HTML标签来解释页面的内容
HTML头部
head元素包含了所有的头部信息元素。
script,link,以及各种meta,title,base
<hr.>
title:
定义了浏览器工具栏的标题
当网页被收藏到收藏夹，显示的默认标题
显示在搜索引擎结果页面的标题
<hr.>
base:
描述了基本的链接地址/链接目录,作为HTML文档中所有的链接标签的默认链接
<br.>
<.a href=“”>哈哈</a.>
<hr.>
link:
引用css层叠样式表
<hr.>
style:
定义css层叠样式表
<hr.>
script:
既可以定义script脚本,也可以引用script文件。
不建议写在head里,写在body的最下方
<hr.>
meta:元数据
指定网页的描述，关键词，文件的最后修改时间，作者。
可以定义搜索引擎的关键词

<!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 bgcolor="green">
        <b>粗体文本</b>
        <code>计算机代码</code>
        <em>强调文本</em>
        <i>斜体文本</i>
        <kbd>键盘输入</kbd>
        <pre>
            池塘边的榕树下，
            知了在声声叫着夏天。
        </pre>
        <small>更小的文本</small>
        <strong>重要的文本</strong>
        <del>删除线</del>
        log<sub>5</sub>
        2<sup>3</sup> = 8
        <font color="green">我是font</font>
    </body>
</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>
        <!-- 超级链接 -->
        普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br>
        图像链接：<a href="http://www.baidu.com"><img width="150"
                src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a><br>
        邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br>

        锚记链接：
        <a id="tips">提示部分</a>

        <a href="#tips">跳到提示不分</a>

    </body>
</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>
        <img src="img/libai.jpeg" width="300" title="" alt="" align="bottom"
            border="1">后面的文本
    </body>
</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>
        <div>文档中的块级元素</div>

        <span>文档中的行级元素</span>

        <!-- 
    块级元素：自占一行，自带换行功能
            div,h,p,form,ul,ol...
        
    行级元素：自己没有换行功能
            a,span,del,sub,sup,em,b,strong....
 -->
    </body>
</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>
        无序列表：
        <ul type="disc">
            <li>项目1</li>
            <li>项目2</li>
        </ul>
        有序列表
        <ol type="I">
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
        </ol>
        自定义列表
        <dl>
            <dt>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </dl>
    </body>
</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>
        <table border="1" cellpadding="10" cellspacing="0" width="400">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>联系方式</th>
                    <th>毕业院校</th>
                    <th>国籍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1001</td>
                    <td>罗永浩</td>
                    <td>13635412586</td>
                    <td>延边第二中学</td>
                    <td rowspan="4">中国</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>罗翔</td>
                    <td>13125693254</td>
                    <td>北京大学</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>樊登</td>
                    <td>13326956541</td>
                    <td>西安交通大学</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>雷军</td>
                    <td>15619851265</td>
                    <td>武汉大学</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        备注：他们都是有一定能力的人。
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</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>
        <iframe src="https://www.sina.com.cn" height="600" width="400"
            frameborder="0"></iframe>
        <iframe src="https://www.sohu.com" height="600" width="400"
            frameborder="0"></iframe>
    </body>
</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>
        <form action="" method="post">
            <p>
                账号：<input type="text">
            </p>
            <p>
                密码：<input type="password">
            </p>
            <p>
                性别：
                <input type="radio" name="gender">男
                <input type="radio" name="gender" checked>女
            </p>
            <p>
                地址：
                <select>
                    <option value="">请选择省</option>
                    <option value="">吉林省</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择市</option>
                    <option value="">长春市</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择区</option>
                    <option value="">南关区</option>
                    <option value="">西城区</option>
                </select>
            </p>
            <p>
                爱好：
                <input type="checkbox" checked>读书
                <input type="checkbox">游泳
                <input type="checkbox" checked>跑步
            </p>
            <p>
                <textarea cols="30" rows="10"></textarea>
            </p>
            <p>
                邮箱：<input type="email">
            </p>
            <p>
                薪水：<input type="number">
            </p>
            <p>
                头像：<input type="file">
            </p>
            <p>
                颜色：<input type="color">
            </p>
            <p>
                电话：<input type="tel">
            </p>
            <p>
                隐藏：<input type="hidden">
            </p>
            <p>
                <!-- <input type="submit">
                <input type="reset">
                <input type="button" value="自定义按钮">
             -->
                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>
                <!-- 
                    我们项目的要求：
                    如果有form，用input
                    如果没有form，用button
                 -->
            </p>
        </form>
    </body>
</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>
        <!-- 
            action：数据的提交后台地址
            method：数据的提交方式
                get：默认值，会把所有要提交的数据拼接在地址栏
                post：封装一个请求体，把数据提交给后台，不会拼接在地址栏
         -->
        <a href="aaa?gender=on&username=admin">a标签</a>
        <form action="aaa" method="post">
            <p>
                <!-- 
                    readonly和disabled区别：
                    readonly可以提交到后台的
                    disabled是不可以提交到后台的
                 -->
                账号：<input type="text" name="username" maxlength="12"
                    placeholder="用户名为6-12位">
            </p>
            <p>
                密码：<input type="password" name="password" placeholder="密码必须是6位">
            </p>
            <p>
                性别：
                <input type="radio" name="gender" value="男" id="man">
                <label for="man">男</label>
                <input type="radio" name="gender" checked value="女" id="women">
                <label for="women">女</label>
            </p>
            <p>
                地址：
                <select name="sheng">
                    <option value="0">请选择省</option>
                    <option value="吉林省">吉林省</option>
                    <option value="北京市">北京市</option>
                </select>
                <select name="shi">
                    <option value="0">请选择市</option>
                    <option value="长春市">长春市</option>
                    <option value="北京市">北京市</option>
                </select>
                <select name="qu">
                    <option value="0">请选择区</option>
                    <option value="南关区">南关区</option>
                    <option value="西城区">西城区</option>
                </select>
            </p>
            <p>
                爱好：
                <input type="checkbox" value="reading" checked>读书
                <input type="checkbox" value="swimming">游泳
                <input type="checkbox" checked value="running">跑步
            </p>
            <p>
                <textarea cols="30" rows="10" name="desc"></textarea>
            </p>
            <p>
                邮箱：<input type="email" name="email">
            </p>
            <p>
                薪水：<input type="number" name="salary">
            </p>
            <p>
                电话：<input type="tel" name="tel">
            </p>
            <p>
                隐藏：<input type="hidden" name="hidden" value="hidden_value">
            </p>
            <p>

                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>

            </p>
        </form>
    </body>
</html>

实体Entity（转义字符）

<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>
        <!-- 
            1999年HTML4.01里程碑版本，在HTML4.01中的几个标签已经被废弃，这些元素在HTML5里有的被删除了，有的被重新定义。HTML5在2012年稳定的版本。
            H5新增：
            画布，多媒体，重力感应，地图，websocket。
         -->
        <!-- 定义音频内容 -->
        <audio src="123.mp3" autoplay controls></audio>
        <!-- 定义视频内容 -->
        <video src="123.mp4" autoplay controls></video>
    </body>
</html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" co ntent="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- HTML5 浏览器兼容性 IE9之前几乎不支持H5 -->
        <!-- <video src="123.mp4"></video>
        <video width="" height="">
            <source src="">
        </video>

        <audio>
            <source src="">
        </audio> -->
        <input type="date">
        <input type="time">
        <input type="datetime">
    </body>
</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>
        <form action="aaa">
            <input type="text" autofocus required>
            <!-- <input type="image" height="20" src="../img/libai.jpeg"> -->
            <br>
            <input type="number" step="100" min="1000" max="6000">

            <input type="text" pattern="[A-Za-z]{3}" placeholder="请输入英文字符">
            <input type="submit">
        </form>
    </body>
</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>
        <!-- 2.内联样式 -->
        <style>
            h1 {
                background-color: green;
            }
            span{
                background-color: yellow;
            }
        </style>
        <!-- 3.外部样式 -->
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- 
            什么是css？
            html提供了布料，css上色。
            CSS层叠样式表
            定义如何显示HTML元素--样式
            样式通常存储在样式表中
            把样式表添加到HTML中，内容与表现分离（样式和结构分离）
            外部样式表可以极大提高工作效率。
            外部样式表通常存储在css文件中
         -->
        <!-- 1.行内样式 -->
        <p style="background-color: red;">我是P标签</p>
        <h1>我是h1标签</h1>
        <span>我是span标签</span>
        <a href="#">我是超级链接</a>
    </body>
</html>

CSS选择器

<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>
        <style>
            /* 类选择器 */
            .fontStyle {
                color: red;
                font-size: 20px;
            }
            .backgroudStyle {
                background-color: yellow;
            }
            /* id选择器，每个标签元素的id是唯一不能重复 */
            #fontStyle2 {
                color: blue;
                font-size: 30px;
            }
            /* 标签选择器 */
            p {
                font-family: "仿宋";
            }
            /* 通配符，全部选择器
                页面初始化
            */
            * {
                margin:0;
                padding: 0;
            }
            /* 组合选择器 */
            h1,div {
                font-size: 50px;
            }
            /* 后代选择器 */
            div p {
                background-color: red;
            }
            /* 子选择器 */
            div>p {
                color: blueviolet;
            }
            /* 紧跟着div的p元素 */
            div + p{
                background-color: pink;
            }
            /* 属性选择器 */
            input[name]{
                height: 100px;
                font-size: 50px;
            }
            input[name=username] {
                color: red;
            }
        </style>
    </head>
    <body>

        <input type="text" name="username">
        <input type="password" name="password">
        <!-- 
            CSS选择器
            选择你想要的元素
         -->
        <!-- 在使用类选择器选择css样式时，可以选择多个，中间用空格隔开即可 -->
        <p class="fontStyle backgroudStyle">我爱你中国！</p>
        <p id="fontStyle2">我爱你长春！！！</p>

        <h1>我是h1标签</h1>
        <div>我是div标签</div>

        <div>
            我是div
            <p>我是div里的p</p>
            <span>
                <p>我是div里的span里的p</p>
            </span>
        </div>
        <p>我是div后面的p</p>
    </body>
</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>伪类选择器</title>
        <style>
            /* 初始状态 */
            a:link {
                color: red;
            }
            /* 鼠标悬停 */
            a:hover {
                color: green;
            }
            /* 激活状态 */
            a:active{
                color: black;
            }
            /* 访问过的 */
            a:visited {
                color: yellow;
            }
            /* 获得焦点 */
            input:focus {
                height: 100px;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <a href="2">超级链接</a>

        <input type="text">
    </body>
</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>
        <style>
            img:hover {
                width: 400px;
                border: 1px red solid;
            }
        </style>
    </head>
    <body>
        <img src="../img/libai.jpeg" width="100">
    </body>
</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>
        <style>
            p::first-letter {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut error
            reprehenderit est ipsam voluptatem, expedita, ipsa exercitationem
            accusamus amet, temporibus deserunt tempore nobis? Cupiditate libero
            repudiandae neque quaerat, incidunt dolore.</p>
    </body>
</html>