自己写的html笔记_html 需要自己写吗-优快云博客

本文链接：https://blog.youkuaiyun.com/TID12/article/details/130352092

一、HTML5介绍
是一种用来描述网页的语言，被称为超文本语言，用其编写的语言要以.html结尾，其中的标签有包括两种
单标签双标签
二、基本框架
html标签
定义是HTML文档，限定了该文档的开始点和结束点，所有其他元素要包括在其里面（html标签是双标签）

<!DOCTYPE html>
<html>
</html>

head标签
定义文档的头部，用于描述文档的各种属性和信息，包括其标题，在web中位置等等。

	<html>
		<head>
		</head>
	</html>

body标签（与head同级）
定义文档的主题，body元素包括了文档的所有内容（文本，超链接，表格，图像等等）会直接呈现在网页上给用户看。

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		用户都可以看到我
	</body>
<html>

title标签
定义文档的标题，也就是网页上显示的标签，该标签是写head标签中必须包含的标签。同时也更有利于SEO的优化（SEO：搜索引擎优化的英文缩写，可满足搜索引擎的排名需求）

<!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">
</head>
<title>
    第一个自己写的网页
</title>
<body>
    用户可以看到我
</body>

</html>

meta标签
用来描述一个HTML的网页文档的属性，关键词等，列如就是使用的是utf-8的编码格式。

三、常用的标签

1、标题
通过h1-h6来进行定义（注意是双标签）
h1是最大的标题，h6是最小的标题。

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

</body>

</html>

运行结果：
（只有6个标签，可以用h$*6来快速生成6个标签）
标题标签的位置
可以在标题标签中添加属性：align=“left | center | right” 来改变标题的位置（默认在左边）

<!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>
    <h1 align="right">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="'left">三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

</body>
</html>

运行结果：
在这里插入图片描述
2、段落
段落：通过p标签进行定义（该标签也是双标签）
换行：如果在不希望产生一个新段落的时候进行换行，可以使用标签br（该标签是单标签）

<!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>
    <p>这个<br>段落演示分行的效果</p>
</body>
</html>

运行结果：
在这里插入图片描述
3、水平线：
通过hr标签在HTML页面中创造水平线（单标签）
属性：color：设置水平线的颜色
width：设置水平线的长度
size：设置水平线的高度
（width和size设置的单位都是px）
align：设置水平线的对其方式（默认居中）
各属性之间不用用逗号隔开

Document

<body>
    <p>这个<br>段落演示分行的效果</p>
    <hr color="red" width="300px" size="20px" align="left">
</body>
</html>

运行结果：
在这里插入图片描述
4、图像
通过img标签定义HTML页面中的图像（img是单标签）
属性：src=“里面放图片的链接，可以有相对路径，绝对路径或者是图片的链接（用的较多）”
alt=“当图片无法显示时，就会显示该文本”
title=“将鼠标放在图片上是显示的文本”
width=“调节宽度” height=“调节高度”（单位为px）

<!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>
    <img src="https://img.zcool.cn/community/011aed5bef8966a801209252b86acd.jpg@2o.jpg" alt="头文字D的图片" title="AE86" width="700px" height="500px">
</body>
</html>

运行的结果：
在这里插入图片描述
5、超链接：
可以通过点击该链接来跳转不同的页面，链接可以是一个图一个字，或者是一组词，通过标签来设置超文本链接。（a标签是一个双标签。）
超链接上显示的东西

<!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>
    <a href="https://www.baidu.com/?tn=15007414_17_dg">百度一下你就知道</a>
    <a href="https://www.bilibili.com/">
        <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Rp9zvqJY4VlnDwkIlmu9PAHaGs?w=183&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7">
    </a>
</body>
</html>

运行结果：在这里插入图片描述
若是点击过的链接则变成紫色，若是未点击过的链接显示蓝色。（后期可通过css修改）

6、标签（对字体进行修改）

em 定义着重文字
b定义粗体文本
i定义斜体字
strong定义加重语气
del定义删除字
span元素没有特定的含义
（以上标签都是双标签）
该标签也可以插入在p标签中使用，与p不同，p一般代表一个文本，文本标签一般表示文本词汇。

<!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>
    <p>十二</p>
    <em>十二</em>
    <b>十二</b>
    <i>十二</i>
    <strong>十二</strong>
    <del>十二</del>
    <span>十二</span>
    <p>我是<i>十二</i></p>
</body>
</html>```


`

运行结果：在这里插入图片描述
7、有序列表
有序列表是一列项目，列表项目使用时有数字标记。始于

标签，每个列表项始于li标签，li标签要放在ol标签里面。

<!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>
    <ol>
        <li>水果</li>
        <li>牛奶</li>
        <li>美食</li>
        <li>奶茶</li>
        <li>饮料</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
ol type属性

1表示列表项目用数字标号（1，2，3…）
a表示列表项目用小写字母标号（a，b，c…）
A表示列表项目用大写字母标号（A，B，C…）
i表示列表项目用罗马数字标号（i，ii，iii…）
I表示列表项目用大罗马数字标号（I，II，III…）
列表之间可以有嵌套在li标签里面再嵌套ol标签

<!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>
    <ol type="A">
        <li>牛奶</li>
        <li>水果
            <ol type="I">
                <li>香蕉</li>
                <li>苹果</li>
                <li>葡萄</li>
            </ol>
        </li>
        <li>美食</li>
        
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
8、无序列表：
无序列表时一个项目的列表，此列项目使用粗体圆点进行标记，无序列表始于ul，每个列表始于li标签，
与有序列表相同也有type属性

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表也同样可以嵌套

<!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>
    <ul type="circle">
        <li>
            水果
            <ul type="disc">
                <li>苹果</li>
                <li>葡萄</li>
                <li>香蕉</li>
            </ul>
        </li>
        <li>
            奶茶
            <ul type ="square">
                <li>淤泥波波</li>
                <li>椰果奶茶</li>
            </ul>
        </li>
        <li>美食</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述
快速生成ul+li的布局：ul>li*3(数据可根据自己所需要的修改）

9、表格
表格的组成与特点
行、列、单元格
单元格特点：同行登高、同列等宽
表格标签
表格：table
行：tr
单元格（列）：td（先写tr再写td）
（快捷键：table>tr2>td2(放表格里面药房的东西)
表格属性

border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
（高度与宽度的单位都是px）

<!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>
    <table border="2" width="300px" height="300px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

运行结果：
在这里插入图片描述
合并单元格
将表格内的某几个单元格合并

水平合并：colspan
垂直合并：rowspan
（水平保留左边，垂直保留上面）

<!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>
    <table border="2" width="300px" height="300px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td colspan="2">单元格4</td>
            <td rowspan="2">单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
        </tr>
    </table>
</body>
</html>

运行结果：
在这里插入图片描述
若要合并多个的单元格，一步一步合并即可。
10、表单
由容器和控件组成的，包括用户的信息输入框，提交按钮等，输入框叫做控件，表单就是容器，能容纳各种控件
表单当中的属性

action服务器地址（将输入的传给服务器）
name表单名称
method 数据的提交方式，由get和post，get把提交的数据url可以看到，post看不到，get一般用于提交少量的数据，post用来提交大量的数据。

表单的元素

表单标签
表单域
表单按钮

input可以生成一个输入框，type改为submit也可以变成一个按钮（单标签）可以通过value来改变其显示的按钮名字
button可以有一个按钮，在button中输入就可以得到想要的按钮名称（双标签）

<!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>
    <form>
        <input> 
        <button>确定</button>
    </form>
</body>
</html>

运行结果：
在这里插入图片描述
文本框
文本域通过input type="text"标签来设定，当用户要输入字母，数字等内容的时候。
密码框
密码框要通过input type="password"来定义（密码框中输入的东西会变成点或者*）

<!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>
    <form>
        用户名：<input type="text" >
        <br>
        密码：<input type="password">
        <input type="submit" value="登录">
    </form>
</body>
</html>

运行结果
在这里插入图片描述

块级元素	内联元素
会独占一行（自上而下排列）	行内元素不会独占页面中的一行，只占其自身的大小
可以设置width，height属性	设置无效
一般可以包含行内元素和其他块级元素	一般不包含块级元素

常见块：div、form、h1~h6、p、table、ul
常见内联元素：a、b、em、i、span、strong
行内块级元素（特点：不换行、能识别宽高）：button、img、input等
11、div容器
在div里面可以前面所学的所有文本标签，可以让网页更清晰，div id=“header" div id=“…”(后面的id可以代表容器代表了什么）
或者写新标签
header头部、nav导航、article独立的完成内容块、aside侧边栏…、footer脚部、section章节（都是双标签）