HTML

阿智527

于 2023-08-02 16:32:03 发布

阅读量181

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_59310112/article/details/132149007

版权

HTML

1. 块级标签

标题：
<h1>一级标题</h1>
div:
<div>这是一个div标签</div>
p：
<p>这是一个p标签，段落标签</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML块级标签</title>
</head>
<body>
标题：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
div:
<div>这是一个div标签</div>
p：
<p>这是一个p标签，段落标签</p>
table：表格
<table width="100%" border="1">
    <caption>表格的标题</caption>
    <!--表头-->
    <thead>
    <!--表头的行-->
    <tr>
        <!--每一行表头由多少个标题组成-->
        <th rowspan="2">组号</th>
        <th rowspan="2">姓名</th>
        <th rowspan="1" colspan="2">成绩</th>
    </tr>
    <tr>
        <th>JAVA</th>
        <th>HTML</th>
    </tr>
    </thead>
    <!--表格的主题-->
    <tbody>
    <!--表格的主题可能由多行数据组成-->
    <!--知识点：rowspan = "3" 表示列占用的范围
              colspan="1" 表示列占用的范围-->
    <tr>
        <th rowspan="3" colspan="1">第一组</th>
        <th>张三</th>
        <th>80</th>
        <th>90</th>
    </tr>
    <tr>
        <th>李四</th>
        <th>80</th>
        <th>90</th>
    </tr>
    <tr>
        <th>王五</th>
        <th>80</th>
        <th>90</th>
    </tr>
    </tbody>
</table>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表项</title>
</head>
<body>
ul无序列表
<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>
ol有序列表，type属性可以指定序号的类型：数字字母罗马数字
<ol type="A">
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
</ol>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<!--action="Test01.html" method="GET"
action表示请求要发送的地址，method表示请求的方式：GET、POST，POST需要服务器，GET请求支持本地资源访问-->
<form action="Test01.html" method="GET">
    <h1>欢迎使用XXX系统</h1>
    <div><!--这是一个行级标签-->
        <input type="text" name="username">
    </div>
    <div>
        <input type="text" name="password">
    </div>
    <div>
        <input type="submit" value="登录" >
    </div>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5的块级标签</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;/*弹性布局*/
            flex-direction: row;/*所有子元素在一行中排列*/
        }
        aside{
            width: 200px;
            background: antiquewhite;
        }
        nav {
            background: #dddddd;
            border-bottom: 1px solid #ddd;
        }
        main {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            background: white;
            display: flex;
            flex-direction: column;
        }
        header {
            height: 50px;
            width: 100%;
            background-color: cornsilk;
            color: white;
        }
        section {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            display: flex;
            flex-direction: column;
        }
        article {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            background-color: pink;
        }
    </style>
</head>
<body>
<aside>侧边栏</aside>
<main>
    <header> <font color="black" size="10px">头部区域</font></header>
    <section>
        <nav>操作导航</nav>
        <article>
            独立内容区
            <h1 style="color: red">h5提供的块级元素全部是用在做布局的：</h1>
            <ul>
                <li>main(主要内容区)</li>
                <li>aside(侧边栏)</li>
                <li>header(头部区域)</li>
                <li>section(区域)</li>
                <li>article(独立内容区)</li>
                <li>nav(操作导航)</li>
                <li>footer</li>
            </ul>
        </article>
    </section>
    <footer>
        footer脚注：用于展示版权信息
    </footer>
</main>
</body>
</html>

结果

HTML_html

2. 行级标签

input
input标签表示输入的意思，凡是可以填写内容或者可以点击的标签都是输入
input标签具有type属性
type=text文本输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
<form action="Form.html" method="get">
    <div>
        <label>账号：</label>
        <input type="text" name="username">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" name="password">
    </div>
    <div>
        <!--checked属性用于单选按钮和复选框时，只要在标签上出现，那么这个标签
            就应该展示选中状态。(设置默认选中)，如果一个单选按钮组中的所有单选按钮均存在checked属性
            时，只有最后一个有效果-->
        <!--radio用于单选-->
        <label>性别：</label>
        <input type="radio" name="sex" value="M" checked>男
        <input type="radio" name="sex" value="F">女
        <input type="radio" name="sex" value="O">其他
    </div>
    <div>
        <!--checkbox用于多选，checked可以作用与多选时都会生效-->
        <label>爱好：</label>
        <input type="checkbox" name="hobble" value="0" checked>唱歌
        <input type="checkbox" name="hobble" value="1" checked>跳舞
        <input type="checkbox" name="hobble" value="2">打篮球
        <input type="checkbox" name="hobble" value="3">RAP
    </div>
    <div>
        <!--label 多行文本-->
        <label>评论：</label>
        <textarea rows="15" cols="100">
label多行文本
name属性除了用来采集数据之外，还可以用来对元素进行分组
作为单选按钮的时候，只有同一个组内的单选按钮才会有单选的效果
单选按钮没有value值，如果需要，那么我们可以手动的配置value属性
checked属性用于单选按钮和复选框时，只要在标签上出现，那么这个标签
就应该展示选中状态。(设置默认选中)，如果一个单选按钮组中的所有单选按钮均存在checked属性
时，只有最后一个有效果
radio用于单选，checkbox用于多选，checked可以作用与多选时都会生效
input type= "file",用于文件上传
img图像标签
文件的数据采集不能通过name属性进行，那么属性采集的数据只是
文件的名字，文件数据需要通过JavaScript脚本来获取
option表示下拉列表的选项，如果没有给定value值，那么value值
就是option标签的文本内容
<span style="color: red ; font-size: 30px">9.9</span>
        </textarea>
    </div>
    <div>
        <label>头像：</label>
        <img src="img/001.jpg" height="80" width="60" title="证件照" alt="加载错误时显示的信息">
    </div>
    <!--文件的数据采集不能通过name属性进行，那么属性采集的数据只是
            文件的名字，文件数据需要通过JavaScript脚本来获取-->
    <div>
        <label>file：</label>
        <input type="file">
    </div>
    <div>
        <label>下拉选择框：</label>
        <select name="city" id="">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">杭州</option>
            <option value="4">成都</option>
        </select>
    </div>
    <div>
        <input type="submit" value="注册">
    </div>
    <div>
        这本书的价格是<span style="color: red ; font-size: 30px">9.9</span>
    </div>
    <div>
        <label>a标签：</label>
        <a href="https://www.baidu.com"></a>
        <a href="Form.html">去自己编写的页面</a>
        <!--锚连接中的锚表示定位，定位的时候只能是#+id的值-->
        <a href="BlockLable.html#p">锚连接</a>
    </div>
</form>
</body>
</html>

结果：

HTML_html_02

JavaScript

在JS中，存在内置对象document，这个对象是浏览器赋予的，直接可以拿来使用，表示文档
JS所有的语法支撑是ES来定义的 ES目前使用的最多的是ES6，在ES6中有许多新特性
在ES6中var定义的变量属于全局变量，使用let定义的变量属于局部变量
为什么会使用var或者let来定义变量呢？
因为JavaScript是一门弱类型的脚本语言，所谓的弱类型表示所有的变量没有类型之分。例如定义了一个变量 let a =1; 此时的变量a类型为数字，但是我们也可以再给塔赋一个布尔值 a = true; 这就是弱类型语言的特征。一个变量具体到底是什么类型，需要看具体赋的什么值

浏览器在解释执行HTML代码的时候，有可能要执行HTML中的脚本语言，只要HTML中存在脚本语言。

为了解析HTML文档，浏览器提供了一个window对象，这个对象是一个复合对象，里面里面包含了很多其他的对象。这些对象主要用于处理页面的中元素以及元素的行为。

window对象中的所有变量都是全局变量，在使用的使用可以省略window，直接使用window中的变量 let elementById =

window.document.getElementById("username"); 
let element =document.getElementById("username");

在浏览器的窗口的控制台记录

element console.log(element) console.log(element.value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div>
    <div>
        <label>账号：</label>
        <input type="text" id="username"  value="admin">
    </div>
    <div>
        密码：
        <input type="password" id="password">
    </div>
    <div>
        <input type="button" value="登录" id="loginBtn">
    </div>
</div>
</body>
<script type="text/javascript">

    let loginBtn =document.getElementById("loginBtn");

    loginBtn.onclick = function () {
        let usernameEl = document.getElementById("username");
        let username = usernameEl.value;
        let passwordEl = document.getElementById("password");
        let password = passwordEl.value;
        console.log(username + "\t" + password)
    }
</script>

</html>

CSS

层叠样式表，CSS主要用来告诉浏览器元素应该怎样呈现

1. CSS选择器

基本选择器
ID选择器类选择器标签选择器
高级选择器
层级选择器(子代选择器后代选择器)

选择器的语法：

ID选择器 => #ID值{}

类选择器 => .类名{}

标签选择器 => 标签名{}

<body>
    <div>
        <input type="text" id="p">
    </div>
    <div>
        <input type="password" class="password">
    </div>
</body>

/*ID选择器*/
#p{
    background-color: cornsilk;
}
/*类选择器*/
.password{
    height: 20px;
    width: 200px;
}
/*标签选择器*/
body{
    width: 100%;
    height: 100%;
    background-color: pink;
}

2.CSS样式的编写方式

行内样式
内部样式
外部样式(需要使用link 引入css)

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

子代选择器和后代选择器:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子代选择器与后代选择器</title>
        <style>
            /*后代选择器，表示body下所有的input标签*/
            body input{
                background-color: red;
            }
            /*子代选择器，表示body标签下一级的input标签*/
            /*body > input{*/
            /*    background-color: black;*/
            /*}*/
        </style>
    </head>
    <body>
        <input type="text" name="" id="">
        <div>
            <input type="text" name="username" class="username">
            <div>
                <span style="color: deepskyblue">这是一个文本</span>
                <input type="text">
            </div>
        </div>
        <div>
            <input type="text" name="password" class="password">
        </div>
    </body>
</html>

3. CSS样式的属性

1. 通用的样式属性

宽度和高度

width:200px;

height:100px;

外边距margin

元素与元素之间的距离，外边距有4个方向：上下左右外边距设置属性的时候必须从上边距开始，满足顺时针旋转的规则，依次为每个方向设置边距

height: 100px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/*
margin: 20px 30px 40px 50px;
*/

结果：

HTML_html_03

内边距padding

/*padding-top: 10px;*/
/*padding-right: 11px;*/
/*padding-bottom: 12px;*/
/*padding-left: 13px;*/
padding: 10px 11px 12px 13px;

结果：

HTML_html_04

边框border
边框宽度: border-width
边框线条类型：border-style
边框线条颜色：border-color
复合属性：width style color，顺序可以随意调整
边框也有4边，因为也可以专门为其中一边进行设置：
border-top、border-right、border-bottom、border-left
圆角设计：border-radius

/*border-width: 10px;*/
/*border-style: double;*/
/*border-color: deepskyblue;*/
border: deepskyblue  double 10px;
.ee{
    border-width: 1px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

结果：

HTML_html_05

字体font
字体类型 font-family
字体大小 font-size
字体风格 font-style
字体重量 font-weight
字体的复合属性有要求：风格->重量->大小->类型或者重量->风格->大小->类型。

<style>
.font{
    /* font-family: 楷体,serif;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;*/
    font: italic bold 30px 新宋体;
}
</style>

<body>
    <div class="font">
        <h2>这是一个标题</h2>
        <lable>
            字体类型 font-family
            字体大小 font-size
            字体风格 font-style
            字体重量 font-weight
            字体的复合属性有要求： 风格->重量->大小->类型  或者 重量->风格->大小->类型。
        </lable>
    </div>
</body>

文本text
文本颜色 color
文本首行缩进 text-indent
文本行高 line-height：行高可以让文本垂直居中
文本装饰 text-decoration：上划线、中横线、下划线
文本对齐方式 text-align：居左、居右、居中、两端对齐

<div class="p">
    文本颜色 color 文本首行缩进 text-indent 文本行高  line-height：行高可以让文本垂直居中 文本装饰 text-decoration： 上划线、中横线、下划线 文本对齐方式 text-align： 居左、居右、居中、两端对齐
</div>
<div class="p2">
    文字居中对齐
</div>

<style>
.p{
    width:500px;
    height: 200px;
    font-size: 20px;/*字体大小*/
    color: #00167b;
    text-indent: 2em;/*缩进两个字符*/
    border:2px double cornflowerblue;/*边框*/
}
.p2{
    width: 200px;
    height: 40px;
    border: 1px solid black;
    font-family: 楷体, serif;
    line-height: 40px;/*行高和元素的高度一致时，内容垂直居中*/
    text-align: justify;/*两端对齐，必须配合text-align-last: justify;使用*/
    text-align-last: justify;
    /*overline内容上方的线*/
    /*line-through中间穿过的线*/
    /*underline下划线*/
    text-decoration: underline;
}
</style>

背景background
背景颜色：background-color
背景图片：background-image
背景大小：background-size
背景位置：background-position
背景是否可重复:background-repeat

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
body{
    background-color: darkgrey;
    background-image: url("../img/002.gif");
    background-repeat: repeat;/*背景图片是否重复*/
    /*
    background-position: 100px 30px;!*背景图片的位置*!
    */
    /*
    background-size: 100% 100%;
    */
    /*背景图片的大小*/
}

浮动float
元素一旦进行浮动，就不再占用原来的位置空间，因为元素之间的摆放存在层级关系，相当于脱离了当前层级。如果浮动后，还想要元素依然占用父元素的空间，那么需要对浮动进行清除
可以使用伪类样式来清除浮动
伪类样式的定义就是使用双冒号来表示伪类
::after 表示在渲染CSS样式的最后要使用的样式
::before 表示在渲染CSS样式之前要使用的样式
伪类样式的编写：选择器::伪类的名称{}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            input{
                float: left;
            }
            input:last-child {
                float: right;
            }
            div::after{
                content: ""; /*渲染样式的时候要加上一个空白字符串*/
                display: block;/*这个content指定的内容需要以块级元素的方式呈现*/
                clear: both; /*清除div内的元素浮动，清除的时候，因为元素已经浮动了指定的位置，清除之后不回还原，只是将元素再拉回了当前层级*/
            }
        </style>
    </head>
    <body>
        <div>
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </body>
</html>

定位position
元素的定位方式：static(流式定位、默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
参照物：
relative：参照物是自身
absolute：向上逐层查找具有定位的父元素，如果没找到，就回以body标签进行定位，绝对定位的元素脱离了当前父容器的空间，层级已经发生了变化
拥有定位的元素可以通过z-index来调整元素的层级，值越大，层级越高。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素的定位</title>
        <style>
            #d1,
            #d2,
            #d3{
                width: 200px;
                height: 100px;
            }
            #d1{
                background-color: red;
                position: relative;/*相对定位*/
                left: 100px;/*相对自身的位置，偏离左边100个px*/
                top: 100px;
                z-index: 1;
            }
            #d2{
                background-color: blue;
                position: absolute;/*绝对定位*/
                left: 0;
                top: 0;
            }
            #d3{
                background-color: pink;
                position: fixed;/*固定窗口*/
                top: 20%;
                right: 10px;
            }
            .box{
                margin: 0;
                position: relative;
            }
            html{
                width: 100%;
                height: 100%;
            }
            body{
                height: 300%;
            }

        </style>
    </head>
    <body>
        <div class="box">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
        </div>
    </body>
</html>

2. 列表样式

列表样式类型：list-style-type:disc(实心圆)、circle(空心圆)、square(正方形)、decimal(数字)

列表样式位置：list-style-position：inside(内部)、outside(外部)

列表样式的图片:list-style-image:url();

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式list</title>
        <style>
            ol{
                /*list-style-type: disc;实心圆*/
                /*list-style-type: circle;空心圆*/
                list-style-type: square;/*正方形*/
                /*list-style-type: decimal;数字*/
                list-style-position: inside;/*列表样式的位置*/
                list-style-image: url("../img/002.gif");
            }
        </style>
    </head>
    <body>
        <div>
            <ol>
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
                <li>第四项</li>
            </ol>
        </div>
    </body>
</html>

3. 超链接伪样式

超链接的伪样式有四种：点击前，鼠标单击，鼠标悬浮，鼠标单击后

link->visited->hover->active

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接的伪样式</title>
        <style>
            a:link{
                color: antiquewhite;
            }
            a:visited{
                color: blue;
            }
            a:hover{
                color: pink;
            }
            a:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="https://www.baidu.com">www.baidu.com</a>
        </div>
    </body>
</html>

4. CSS3新增的样式属性

1 文本阴影

<h1>这是标题</h1>

h1{
    text-align: center;
    text-shadow: 2px 1px 1px #da1e1e;
    background-color: black;
    color: white;
}

2 盒子阴影

<div class="box"></div>

.box{
    width: 400px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 3px 2px 10px black;
}

3 关键帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .block{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            animation: move 10s infinite;
        }
        @keyframes move {
            0%{。.
                top: 0;
                left: 0;
            }
            25%{
                top: 0;
                left: 400px;
            }
            50%{
                top: 200px;
                left: 400px;
            }
            75%{
                top: 200px;
                left: 0;
            }
            100%{
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

4 渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景色</title>
    <style>
        .box1{
            height: 20px;
            /*线性渐变*/
            background-image: linear-gradient(to right, #9c8484, red);
        }

        .box2{
            width: 200px;
            height: 200px;
            /*径向渐变*/
            background-image: radial-gradient(yellow, red, blue);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

4.45 字体图标

CSS3可以让我们自己定义字体图标。目前用的比较多的就是font-awesome 字体

阿智527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML1. 块级标签标题：<h1>一级标题</h1>div:<div>这是一个div标签</div>p：<p>这是一个p标签，段落标签</p><!DOCTYPE html><html lang="en"><...
复制链接

扫一扫