前端学习历程之初识HTML5（二）_html 二级标题文本。三级标题文本,加下划线。段落文本1,加下划线。段落文本2,-优快云博客

本文链接：https://blog.youkuaiyun.com/Flang0/article/details/126878732

前端学习历程之初识HTML5（二）

书接上文，我们认识了html的基础知识。而本文则对上一篇的知识加强，还有认识一些其他标签，还有初识css

上一篇知识总结：

单标签

hr ,br,base,img

双标签：

除了单标签，就是双标签。

绝对路径与相对路径

绝对路径：

相对路径：

本篇内容

表单

表单的组成

提示信息

表单域:

即form范围内的区域

<form action="https://mp.youkuaiyun.com">
    <!---将在表单中获取的数据提交到action所提供的网址 -->
</form>

表单元素/表单控件

文本框

<form action="https://mp.youkuaiyun.com">
   姓名：<input type="text"><br>  
   <!--
     姓名：<input type="text" placeholder="name"><br>
      palaceholder可以给文本框一个灰色的内容，其内容可以是文本也可以是数值。当输入内容方式时消失。
   -->
    <!--disabled默认无法修改 -->
    <!--value给出一个初始值-->
</form>

密码框

<form action="https://mp.youkuaiyun.com">
   姓名：<input type="text"><br>  
   密码：<input type="password" name="" id=""><br>

</form>

提交按钮

<form action="https://mp.youkuaiyun.com">
   姓名：<input type="text"><br>  
   密码：<input type="password" name="" id=""><br>
        <input type="submit" >
</form>

重置按钮

<form action="https://mp.youkuaiyun.com">
   姓名：<input type="text"><br>  
   密码：<input type="password" name="" id=""><br>
        <input type="submit" value="下一步">
        <input type="reset">  
      <!-- value可以修改按钮内的文本,对提交和重置都有效-->
</form>

单选框

<form>
    性别：<input type="radio" name="sex" checked>男
    <!-- cheecked默认选中-->
        <input type="radio" name="sex">女
    <!--同一条件下，name的必须一致 -->
        
</form>

复选框

<form>
    
       爱好： <input type="checkbox" name="love">jk
        <input type="checkbox" name="love">白丝
        <input type="checkbox" name="love">黑丝
    <!--复选框name可有可无，但在学js时，必须一致-->
</form>

选择文件

<form>
   <input type="file"> 
</form>

下拉框

<form>
     <select>
            <option>
                山东省
            </option>
            <option>
                河南省
            </option>
            <option>
                陕西省
            </option>
            <option>
                山西省
            </option>
        </select>
        <select>
            <option>
                曹县
            </option>
            <option>
                菏泽
            </option>
            <option>
                曲阜
            </option>
            <option>
                德州
            </option>
        </select>
</form>

文本域

<form>
    请输入你的评论：<textarea></textarea>
</form>

name属性提交后台

CSS

CSS的三种使用方式

行内样式(不常用)

<p style="width: 200px;color: aqua;">hello world</p>

内部样式

在head头部文件中写入style标签，在style标签的范围内写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>
        p{
            color: red;
        }
    </style>
</head>
<body>
   <p>hello world</p>
</body>
</html>

外部样式

外部样式是新建一个css文件，在css中书写css代码。html文件通过link引入css样式

html文件

<!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>
    
    <link rel="stylesheet" href="./css.css">
    <!--通过link引入css -->
</head>
<body>
     <p>hello world</p>
</body>
</html>

css文件

p{
    color:red
}

CSS选择器

标签选择器

标签选择器就是将HTML标签作为选择器

<!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>
    <link rel="stylesheet" href="./css.css">
    <style>
        p{
            color: red;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>
     <p>hello world</p>
     <h1>hello world!</h1>
</body>
</html>

类选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>

<style type="text/css">

.red {
color: red;
}
                           
.green {
color: green;
}
                       
.font22 {
font-size: 22px;
}     /* class后带有font22的  字体像素22 */

p {
text-decoration: underline;
font-family: "微软雅黑";           
/* 所有p标签内字体:  微软雅黑+下划线 */
}

</style>
</head>
<body>

<h2 class="red">二级标题文本</h2>          
<!-- 红色 -->

<p class="green font22">段落一文本内容</p> 
<!-- 字体:绿色+像素22+微软雅黑+下划线 -->

<p class="red font22">段落二文本内容</p>   
<!-- 字体:红色+像素22+微软雅黑+下划线 -->

<P>段落三文本内容</p>                      
<!-- 字体:微软雅黑+下划线 -->

</body>
</html>

id选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>

<style type="text/css">

#bold {
font-weight: bold;
}

#font24 {
font-size:24px;
}

#bold#font24 {
font-weight: bold;
font-size: 24px;
}

</style>
</head>
<body>

<p id="bold">段落1:id="bold",设置粗体文字。</p>       <!-- 粗体文字 -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="bold font24">段落1:id="bold font24",同时设置粗体和字号为24px。</p>  <!-- 无变化 -->                     

</body>
</html>

并集选择器

多个选择器在css中用逗号隔开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type = "text/css">

h2,h3,p {
color: red;
font-size: 14px;
} /*不同标记组成的并集选择器*/

h3,.special,#one {
text-decoration: underline;   
}  /* 加下划线 */

</style>
</head>
<body>

<h2>二级标题文本</h2>                           <!--字体14像素、红色-->
<h3>三级标题文本</h3>                           <!--字体14像素、红色、加下划线-->
<p class="special">段落文本1,加下划线。</p>      <!--字体14像素、红色、加下划线-->
<p>段落文本2</p>                               <!--字体14像素、红色-->
<p id="one">段落文本3</p>                      <!--字体14像素、红色、加下划线-->

</body>
</html>

后代选择器

父元素包含子元素，祖元素又包含父元素。

简易版：就是儿子，父亲，祖父，祖父的父亲（我也不知道叫什么）的关系，祖父底下有父亲，儿子。父亲底下有儿子。

父元素包含子元素，祖元素有包含父元素，如果在上级元素继承的属性自己有，则使用自己的属性

<!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>
    <link rel="stylesheet" href="./css.css">
    <style>
        ol {
            background-color: blue;
            color: yellow;
        }
        ol li{
            background-color: rgb(255, 0, 4);
            color: rgb(0, 255, 26);
            height: 100px;
        }
        ol li p{
            background-color: rgb(148, 72, 74);
            color: rgb(70, 167, 227);
        }
        /*在这里我是为了方便看出他们的父子关系，才将父元素放在子元素前面*/
    </style>
</head>

<body>
    <ol>
        <li>
            <p>123456</p>
        </li>
    </ol>

</body>

</html>

关系选择器

子代

伪类选择器

先说这些

超链伪类选择器：

超链接的伪类	含义
a:visited{ CSS样式规则: }	未访问时超链接的状态
a:link{ CSS样式规则;}	访问后超链接的状态
a:hover{ CSS样式规则; }	鼠标悬停时超链接的状态	不止能在a用
a:active{ CSS样式规则; }	鼠标单击不动时超链接的状态	不止能在a用