web开发之路——HTML

最新推荐文章于 2025-04-28 12:46:30 发布

原创最新推荐文章于 2025-04-28 12:46:30 发布 · 611 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web开发

本文介绍了HTML的基本概念、结构及常用标签，并详细讲解了如何利用CSS进行网页样式设计，包括选择器、布局属性等内容。

1、HTML简介

定义
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML、CSS、JS
如果把网页比作是一个人，HTML就是身体，CSS就是衣服，JS就是动作

2、HTML结构

这里写图片描述
Doctype
Doctype是一个html的规范，规定了用什么样的规则去翻译html语言。有了这个声明，就相当于是告诉浏览器用自己规定的标准去翻译html语言，而不是用自己的标准去翻译，这样在所有的浏览器中的样式就都一样了
这里写图片描述

head头文件
头文件提供了页面编码、刷新、跳转、关键词等信息
编码设置

 <meta http-equiv='content-type' content='text/html;charset=utf-8'>

跳转

 <meta http-equiv='Refresh' content='5; url=http://www.baidu.com'> <!--  5秒后跳转 -->

刷新

 <meta http-equiv='Refresh' content='2'> <!--  每两秒刷新 -->

图标设置

<link rel="icon" href="baidu.svg"> <!--设置图标-->

关键字

<meta name="keywords" content="aaa,bbb,ccc">

网页描述信息

<meta name="description" content="asdasdasdasdasdasdasdas">

X-UA-Compatible

这个是IE8特有的,为了向下兼容IE7浏览器
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

网页的标题

<title>这里是标题</title>

3、HTML标签

标签一般分为两种：块级标签和行内标签

块级标签：内容会占一整行（不管内容有多少，总是占用固定的空间）
        常用块级标签：<h1></h1>...<h6></h6>  <div></div>(没有内容格式，需要CSS往里套)  <p></p>
行内标签：自己有多少就占用多少
        常用行内标签：<a></a>   <span></span>(没有内容格式，需要CSS往里套)

块级标签和行内标签不是绝对的，两者之间可以通过CSS进行转换

符号

在html中，符号一般都有特殊意义。为了在网页中显示出符号的样子，我们也已使用符号代码来代替
这里写图片描述

这里写图片描述

各种标签

p标签
处理段落
从p开始到/p结束，代表了一个段落，在段落中添加br可以换行

<p>asdasdasdasdasd</p>
<p>asdasdasdasdasdasdasdasdasdai<br>sdasdasdasdasdasdasdasdasdasdasda
sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</p>

注：标签的包含：子标签只能在父标签的里面显示

<div style="width:200px;"> <!--在style里面添加“float:left;可以将div模
块堆叠”-->
        <p>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</p>
</div>
在这里，段落只能在div规定的大小内显示

br标签
换行

略

a标签
超链接

<a href='https://www.baidu.com' target='_blank'>百度 </a> <!--跳转到别的网页--> <!--target='_blank' 表示在一个新的窗口打开-->
<a href="test.html">test</a> <!--跳转到本地网页-->
<a href='#aa'>看第二章</a> <!--#aa 代表跳转到id是aa的地方，id相当于标签的名字，默认id是不能重复的，重复了也不会报错。但是会出问题-->
 <div id='dd' style='height:2000px; background-color:red'>第一章</div>
<div id='aa' style='height:2000px; background-color:green'>第二章</div>

id，style, name所有的标签都有
a标签特有的属性 target href

div标签
div标签没有自己独特的样式，他的作用就是将页面分块，配合CSS可以有多种样式

没有具体的例子，在很多例子上都会有div标签

img标签
用来显示图片

<img src='baidu.svg' title='aaaaaaaa' style='height:100px; width:100px;'> <!--放置图片 src是路径，title是鼠标放在图片上后显示的信息-->

h标签
标题，从h1~h6一次变小

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

select标签
下拉菜单

<!--普通的下拉菜单-->
<select>
    <option value='1'>丁一</option> <!--在form表单提交的时候，将value值提交-->
    <option value='2'>丁二</option>
    <option value='3' selected='selected'>丁三</option> <!--默认-->
    <!--
        比如要返回数据的时候，丁一、丁二、丁三就对应返回1,2,3
    -->
</select>

<!--带滚动条的-->
<select size='2'>
    <option>丁一</option>
    <option>丁二</option>
    <option>丁三</option>
</select>

<!--可以多选的, 选的时候要按住ctrl-->
<select size='2' multiple="multiple">
    <option>丁一</option>
    <option>丁二</option>
    <option>丁三</option>
</select>

<!--有分组的-->
<select>
    <optgroup label="北京">
        <option>通州</option>
        <option>朝阳</option>
    </optgroup>
    <optgroup label="河北">
        <option>啦啦啦</option>
        <option>啪啪啪</option>
    </optgroup>
</select>

input系列
页面需要提交数据的时候，就会用到input标签

<!--复选框-->
<h4>checkbox</h4>
<input type="checkbox" checked="checked"> <!-- checked="checked"默认选中-->
<input type="checkbox">
<br>
<!--单选框   如果radio的name属性一样，就会启动互斥机制,只能有一个被选中-->
<h4>radio</h4>
语文：<input name='aa' type='radio'> <!-- checked="checked"默认选中

数学：<input name='aa' type='radio'>
<br>
<!--文本输入框-->
<h4>text</h4>
<input type="text">
<br>
<!--密码输入框-->
<h4>password</h4>
<input type='password'>
<br>
<!--按钮--> <!--button,submit在form标签中不一样，不在form标签中效果是一样的-->
<h4>button</h4>
<input type="button" value='btn'>
<br>
<!--按钮-->
<h4>submit</h4>
<input type='submit' value="sub">
<br>
<!--文件-->
<h4>file</h4>
<input type="file">
<br>

form标签
input是装在要提交的数据，form是完成提交的动作，所有的数据都是通过form提交到后台的

<form action="https://www.baidu.com">  <!--action指的是要将数据提交到哪里--> <!--如果想要递交文件，需要设置一个特殊的属性 enctype='multipart/form-dat
a' method="POST"-->
    <input name='dy_text' type='text'> <!--name作为提交后台时的数据标识-->
    <input type="button" value='提交'> <!--button只是一个普通的按钮，不能提交数据-->
    <input type="submit" value="提交"> <!--submit可以将数据提交-->
</form>
<!--
    提交的数据，在后台是以字典的使用传的，{"dy_text":用户输入的内容}
    如果没有name属性，提交的数据在后台无法识别
-->

id只能在HTML里提供标识，提交不了后台,要提交到后台，需要name属性

textarea标签
多行文本输入

<textarea>iii</textarea> <!--这里的iii 就是默认值-->
<input type="text" value='aaaa'>  <!--input标签的value属性设置默认值-->

label标签
文本和标签有对应关系，选中文本就跟选中标签效果是一样的

<label for="dy001">点击这里</label>
<input id='dy001' type='checkbox'>
<hr> <!--显示一道横线-->

ul、ol、dl列表标签

<!--列表，样式是一个圆点-->
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<!--列表，样式是数字-->
<ol>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ol>
<!--列表，带标题和内容-->
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

table表格

<!--表格-->
<table border='1'>  <!--boder设置边框宽度--> <!--thead和tbody可以忽略-->
    <thead> <!--表头-->
        <tr><!--一行-->
            <th>第一列</th> <!--头部里面的列，用th表示-->
            <th>第二列</th>
            <th>第三列</th>
        </tr>
    </thead>
    <tbody> <!--内容-->
        <tr>
            <td colspan='2'>111,222</td>  <!--内容里面的列，用td表示--> <!--colspan='2'表示这个单元格占两个位置,这一行占两列-->
            <td>333</td>
        </tr>
        <tr>
            <td rowspan='2'>aaa,ff</td>  <!--内容里面的列，用td表示--><!--这一列占了两行-->
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>xxb</td>
            <td>vvc</td>
        </tr>
    </tbody>
</table>

fieldset标签

<fieldset> <!--显示一个框，框上面有标题，里面有内容-->
    <legend>登录</legend>
    <p>用户名：</p>
    <p>密码：</p>
</fieldset>

一个简单网页的代码

<!DOCTYPE html>
<html lang='en'>
        <head>
                <meta charset="UTF-8">
                <title>HTML小练习</title>
        </head>

        <body>
                <div style="background-color:red;">
                        头部
                </div>

                <div>
                        <div style="background-color:#ddd;float:left; width:20%;height:800px;">
                        左边部分
                        </div>
                        <div style="background-color:#634;float:left; width:80%;height:800px;">
                        右边部分
                        <form action="www.baidu.com" enctype="multipart/form-data" method="post">
                                <p>
                                        <input type="text" name="host">
                                        <input type="password" name="pwd">
                                </p>

                                <div style="background-color:rosybrown;color:white">
                                        <h6>爱好</h6>
                                        aaa<input name="aihao" type="checkbox" value="1">
                                        bbb<input name="aihao" type="checkbox" value="2">
                                        ccc<input name="aihao" type="checkbos" value="3">
                                </div>
                                <div>
                                        <h6>性别</h6>
                                        男:<input name="xingbie" type="radio" value="1">
                                        女:<input name="xingbie" type="radio" value="0">
                                </div>
                                <div>
                                        <select>
                                                <option value="beijing">北京</option>
                                                <option value="shanghai">上海</option>
                                                <option value="shenzhen">深圳</option>
                                        </select>
                                </div>
                                <div>
                                        <textarea name="beizhu">这里是默认值</textarea>
                                </div>
                                <div>
                                        <input type="file" name="file_name">
                                </div>
                                <input type="submit" value="提交">
                        </form>
                        </div>
                </div>
        </body>

</html>

4、css

css是用来装饰html的样式的，他可以定义标签的大小、背景颜色、字体大小等等。
css可以写在三处，标签中、head中、写在.css文件中然后在head中导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--CSS的优先级，在标签中直接定义的样式优先级最大，在head里的style的优先级是最下面的优先级最大-->
    <link rel="stylesheet" href="dingyi.css"> <!--从外面带入CSS文件-->
    <style> <!--创建CSS样式-->
        .cc{
            color:red;
            font-size:19px;
        }
        .cs{
            color:green;
        }
    </style>
</head>

<body>
    <div class='cc cs' id='div01'>
    11
    </div>
    <div class='bb' id='div02'>
    11
    </div>
</body>
</html>

css选择器

想要标签能有应用样式，需要两个步骤，一是寻找标签，二是应用样式
class选择器
寻找标签可以通过class选择器来寻找

.c1{}
<div class="c1">111</div>

标签选择器
也可以通过标签选择器来寻找

a{
color:red;
}
这样会将HTML中所有的a标签应用样式

input在标签选择器中有些特殊

input[type="text"]{

}

ID选择器
通过标签的ID来寻找标签

#uu{

}

层级选择器
通过层级来选择标签
只要最里面的span应用样式

.c3 a div span{

}
<div class="c3">
    <a>
        <div>
            <span>11111</span>
        </div>
    </a>
</div>
<span></span>

.c3 a div c4{

}
<div class="c3">
    <a>
        <div>
            <span classs='c4'>11111</span>
        </div>
    </a>
</div>
<span class='c4'></span>
上面的层级选择器，只应用于里面的c4，不应用于最下面的，最外层的c4

组合选择器

a,p{


}
表示a，p标签都可以应用这个样式，可以和层级标签一块使用

css中的样式

background（背景）

background-image:url(https://blog.csdn.net/%3Cspan%20class=%22hljs-string%22%3E'image/5.png'%3C/span%3E); 设置图片
background-repeat:no-repeat;是否在XY轴重复
background-position:-105px  -112px;图片的位移，用过div设置显示的大小可以只显示图片的局部
background-color:xxxx;颜色
还有些其他，略

border（边框）

border:6px dotted #3D3127   边框、样式、颜色
borger-left:xxxxxx   只设置左边框
borger-top:xxxxxx   只设置上边框
borger-button:xxxxxx   只设置下边框
borger-right:xxxxxx   只设置右边框

display

display: none;  不显示   block; 变为块级标签   inline; 变为行内标签

cursor
改变鼠标在标签内容时的样式

cursor:pointer;(小手)
        help;（帮助）
        wait;（等待）
        move;（移动）
        crosshar;（坐标）

float
使标签移动

float:left; (使块级标签在同一行堆叠)
        right;

如果子标签全都都设置 float属性，父标签将消失，需要在父标签中添加

<div stype="clear:both;"></div>

pposition
position:
fixed; 固定
absolute;绝对
relative;相对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

<div style="position:fixed;bottom:0;right:0">返回底部</div> <!--可以类比成图层，新建了一个图层，下边的标签是下面的图层--> <!--针对整个窗口的-->

<div style="position:absolute;bottom:40px;right:30px">返回底部222</div>

<!--relative 经常与absolute进行合用-->
<div style="position:relative; background-color:green; height:400px; width:500px">
    <div style="position:absolute;bottom:30px; right:30px; ">aaaa</div>
</div>

<div style="height:5000px; background-color:red"></div>
</body>
</html>

opacity（透明度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div style="background-color:black; height:300px; width:300px; opacity:0.6;"></div>
</body>
</html>

z-index(层级)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div style="z-index:10; position:fixed; top:0; bottom:0; right:0; left:0; background-color:green; ">

<span style:"color:white;">aaaaaaaaaaaaaa</span>
</div>
<div style="z-index:20; opacity:0.3; position:fixed; top:0; bottom:0; right:0; left:0; background-color:red; ">
</div>
<!--z-index 数越大，层级越靠上-->
</body>
</html>

margin、padding(外边距内边距)
padding
padding-right
padding-left
padding-top
padding-bottom

margin
margin-right
margin-left
margin-top
margin-bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div style="border:1px solid red; height:70px;">
    <!--外边距-->
    <div style="background-color: green; height:50px; margin-top:20px;"></div>
</div>
<div style="border:1px solid red; height:70px;">
    <!--内边距 把自己增加-->
    <div style="background-color: green; height:50px; padding-top:200px;"></div>
    <!--边框4个值，表示上、右、下、左-->
    <!--边框2个值，表示上下、左右-->
    <div style="background-color: green; height:50px; padding-top:5px 10px 5px 10px;"></div>
</div>
</body>
</html>