h5与css

前往变秃的路上

已于 2023-03-31 16:07:18 修改

阅读量227

点赞数

文章标签： css 前端 html5

于 2023-03-31 15:17:55 首次发布

本文链接：https://blog.csdn.net/a1852384503/article/details/129878753

版权

对于初学h5，我使用的工具是vscode，优点;支持插件多，且支持很多语言程序，例如，c,c++,css,html,java,等等！

在云计算学习中心老师的带领下，我们首先学习了html的结构和一些标签。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>我是标题 /title>
</head>
<body>
这是我的第一个HTML页面！
</body>
</html>

代码分析：

1. 我们创建的文件名称最好是英文的，不要以中文命名，同时后缀改为.html
2. ：这句是告诉浏览器我们所编写的文件类型是 html 文件，希望浏览以HTML5的格式来进行解析。
3.：指定我们文件的根节点是什么，以什么样的语言来进行显示
4.：用于定义这个文件的头部信息
5. ：用于定义页面的编码格式为 utf-8，而 meta 标签用于指定页面的元数据信息。
6.：用于指定文件的标题信息
7.：我们所有的页面在浏览器显示的区域都是定义在这个部分中的。
8. 对于HTML页面来说，标签是需要闭合的，也就是说：有开始标签，也就结束标签。

<p>标签，特征：独占一行
<br>标签，特征：换行
<hr>标签，特征：水平实线

重点：form表单

form标签是用于指定表单数据的提交方式和地址。它有以下几个属性：

name：用于指定表单的名称，方便后续提交使用

id：表单的唯一名称，一般用于提交或样式设置

action：用于定义表单数据的提交地址

method：用于指定表单数据的提交方式，有以下几个常用值

get：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小

post：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制

put：用于修改数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑 delete：用于删除数据，这种方式是 RestFul 风格的，后续在某些项目中会用到，一般现在可以不用考虑

enctype：用于指定表单提交的数据类型，有以下两个值： multipart/form-data：以二进制流的方式进行提交，一般用于文件上传 application/x-www-form-urlencoded：以文本的方式进行提交，常用方式，默认值

一些表单常用标签

文本输入框：文本输入框是使用 input 标签来指定，根据它的 type 属性来指定是什么样的类型的输入框。它的属性说明如下： name：用于表单提交是把数据提交到后端 id：给这个输入框一个唯一值，一般是用于 JavaScript 来获取它时所使用 value：它代表是这个输入框所输入的值 size：用于指定这个输入框的长度，不推荐使用，后续会用 CSS 来控制 maxlength：用于指定这个输入框所能输入值的最大的长度

单选框：单选框也是使用 input 标签，但它的 type 属性的值为 radio，它一般用于多个值中只能选择一个值的情况。如，姓别属性说明如下： name：给这个单选框指定一个组名，也是数据提交后后端能够获取数据的值，多个单选框如果 name 属性相同才会是同一个组。 value：单选框的值 checked：它是一个布尔值（真和假），如果值为值（true）即选中，值为假（false）则未选中

多选框：多选框也是使用 input 标签，但它的 type 属性的值为 checkbox，一般用于多个选择的情况。属性与单选框相同。

文本输入域：文本输入域是用于输入长文本的内容，使用 textarea 标签，它有以下几个属性： name：用于获取文本域的值

rows：指定文本域的高度（行数）

cols：指定文本域的宽度（列数）

下拉列表：下拉列表是用于选择使用的，它可以是单选的，也可以是多选的。使用 select 标签来指定，属性如下：

name：用于获取下拉框的值

multiple：指定是否可以多选，不重要，了解即可

size：用于指定可看选项个数，不重要，了解即可子标签是 option，用于指定下拉选项，它的 value 属性用于指定这个选项的值

文件上传：文件上传还是使用 input 标签，但它的 type 属性为 file，常用的属性也是 name.

南瓜登录网页列子

<!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>郭正毅06</title>
</head>
<body>
    <pre><font size="7">             登录</font></pre>
    <hr color="#F0F0F0">
    
<form action="">
   <table  border="1"  align="center" cellpadding="0" cellspacing="0" >
   <tr>
    <td width="275">密码登录</td>
     <td width="150">扫码登录</td>
   </tr>
   <tr>
    <td>
        <select name="phone" id="" size="1">
        <option value="+86">+86</option>
        <option value="+126">+126</option>
    </select>
    <input height="50" type="tel" maxlength="11" placeholder="请输入手机号" >
    </td>
    <td rowspan="4"><img src="images/06.png" alt=""  width="125"></td>
   </tr>
   <tr>
    <td><input  type="password" placeholder="请输入密码"><font size="1" >忘记密码</font></td>
   </tr>
   <tr>
    <td><br></td>
   </tr>
   <tr>
    <td><input type="checkbox" ><font size="1">记住密码</font></td>
   </tr>
   <tr>
    <td align="left" ><input type="submit" value="登录" style="width:230px;height:40px" style="background: red;"></td>
    <td>
        <pre>打开<font color="red">西瓜视频手机APP</font>
我的-扫一扫登录</pre>
    </td>
   </tr>
</table>

   <pre align="center">其他方式：<img width="18" src="https://img1.baidu.com/it/u=2734075793,2935301182&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1670950800&t=4ab5edf466411b8bbf0eaa5179aa2ca4" alt=""> <img  width="18" src="https://img0.baidu.com/it/u=415740658,361629440&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670950800&t=0b1ee2aa75f4f74f72d082a87c4710f4" alt=""> <img width="18" src="https://img2.baidu.com/it/u=111557834,4181952527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">           手机验证码登录                         </pre>
   
   
<p align="center"><input type="checkbox" name=dlkey" id="">登录即代表你同意<font color="#0080FF">用户协议</font>和<font color="#0080FF">隐私政策</font></p>
   <hr noshade="1" >

   <table border="1px" cellpadding="0" cellspacing="0" >

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

基本选择器

基本选择器包括：标签选择器（根据标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）


<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
div{
color: red;
}
#one{
color: blue;
}
.two{
color: yellow;
}
{
color: green;
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
<div >
这是第一个div
</div>
</body>
</html>

优先级
ID > class > 标签 > 通配符

包含选择

子代选择器（获取的是某个标签的第一级子标签）

后代选择器（获取的某个标签里面所有的子标签）

分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
3.3 属性选择器
}
/*后代选择器*/
.list li{
border: 1px solid blue;
}
/*逗号择器*/
.one,.two,#first{
color: green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</ul>
</div>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid black;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
/*属性值以某个值开头*/
input[type ^="e"]{
background: green;
3.4 伪类选择器
同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪
类选择器）
}
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div class="container">
这是一个div容器
</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我喜欢打游戏</div>
<p id="msg1" ">这是一个段落</p>
</body>
</html>

伪类选择器

定义：同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪类选择器）

:link ------ 链接点击之前
:visited ----- 链接点击之后
:hover ------"悬停"
:active ------"激活" 鼠标点击的时候但是不松手

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*点击之前的颜色*/
a:link{
color: red;
}
/*点击之后的颜色*/
a:visited{
color: green;
}
/*鼠标悬停的颜色*/
a:hover{
color: blue;
}
思考：这四种状态的顺序可以不可变？？？？
四种状态的顺序最好固定，link visited hover active
3.5 伪元素选择器
注意：要使用伪元素选择器一定要加上content属性
4. CSS常见样式
4.1 基本语法
/*鼠标点击在上面但是不松手的时候*/
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点我</a>
</body>
</html>

四种状态的顺序最好固定，link > visited > hover > active

伪元素选择器

:before
:after ------ CSS2
::before
::after

注意：要使用伪元素选择器一定要加上content属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "张三";
color: red;
}
p::after{
content: "李四";
color: green;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>