HTML

最新推荐文章于 2024-08-30 15:10:39 发布

73、

最新推荐文章于 2024-08-30 15:10:39 发布

阅读量653

点赞数 1

分类专栏： # 前端基础文章标签： html基础前端开发 html html5 前端

本文链接：https://blog.csdn.net/weixin_40318474/article/details/106207604

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML，称为超文本标记语言。
不区分大小写。
注释：< !-- 注释内容 -->

1、本地查看

通过本地浏览器直接打开编写的html文件，例如：

创建 page1.html 文件（前端页面一般都是以 .html 后缀结尾）

<h1 style="background-color:red;">@@@@</h1>
<a href="https://blog.csdn.net/weixin_40318474/category_9876647.html">73主页</a>

使用浏览器直接打开文件查看内容

2、基本结构

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

</body>
</html>

每个html都应该包含上述部分，否则就是不规范

< !DOCTYPE html>，指定文档类型为html格式，浏览器会根据html格式去渲染下面的标签
< html lang=“en”>…< /html>，HTML文件内容区域，所有的内容都应该写到它的内部。其中lang=”en”表示页面是英文格式，翻译页面时会读取此值来获取当前页面是什么语言编写
- < head>…< /head>，放一些描述信息。
- < body>…< /body>，放希望浏览器呈现出的内容。

3、head标签

head标签相当于人的大脑，内部可以放一些页面的描述信息，该部分内容虽然不会在页面展示，但也起到非常重要的作用。

3.1 title 标题

title标签用于指定网页的标题，所有网站页面标签部分的文字都是基于title实现。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>我的网页</title>
    </head>
    <body>
        ...
    </body>
</html>

3.2 meta 文档字符编码

meta标签可以定义文档的字符编码，即：浏览器会按照charset设置的编码去读取下面的文档内容。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

注：

定义字符编码的标签必须放在最上方；
乱码现象：文件编码和charset字符串编码不一致时，浏览器会根据charset定义去读取内容，所以就会出现乱码。

3.3 meta 页面刷新

meta标签设置页面定时刷新。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <meta http-equiv="Refresh" Content="3"> <!--3秒刷新一次-->
        <!--
		<meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com"> --> <!--3秒之后跳转到百度-->
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

3.4 meta 关键字

meta标签可以设置关键字，用于搜索引擎收录和关键字搜索。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <meta name="keywords" content="hello1, hello2, hello3">	<!-- 给搜索引擎用的，搜索这些关键字就能找到这个网站 -->
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

3.5 meta 网站描述

meta标签可以设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <meta name="description" content="nihao,nihao">	<!-- 网站相关的描述 -->
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

在这里插入图片描述

3.6 meta IE浏览器

在前端开发领域，IE浏览器因为兼容性一直被鄙视，因为IE遵循自己的标准而其他浏览器遵循另一套标准，所以同样的代码在其他浏览器都可以运行，唯独IE需要特殊设置。

以下是专门针对IE浏览器设置，在IE浏览器上运行时，按照最新的默认渲染页面，例如：使用 IE10 浏览器访问页面，如果在IE浏览器兼容中切换到IE8，倘若没有设置X-UA-Compatible，那么页面就会按照IE8模式去显示页面，而设置X-UA-Compatible之后，浏览器永远会按照最新的默认来对页面进行渲染。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

3.7 meta 触屏缩放

meta标签可以设置页面是否支持触屏缩放功能，其中各元素的含义如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <!--支持触屏缩放-->
    	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    	<!--不支触屏持缩放-->
    	<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

3.8 link 图标

link标签可以设置网页标题上的图标

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <!--<link rel="shortcut icon" href="图标文件路径">-->
        <link rel="shortcut icon" href="image/favicon.ico"> <!-- 标题的小图标 -->
    </head>
    <body>
        <h1>早上好</h1>
    </body>
</html>

3.9 link 导入css文件

<link rel="stylesheet" type="text/css" href="css/common.css">

3.10 style 样式

<style>
    label{
        width: 80px;
        text-align: right;
        display: inline-block;
    }
</style>

4、body标签

在使用浏览器查看html页面时候，看得到内容都是body标签中呈现出来。body中所有标签可以划分为两类：

块级，标签自己独占整行。如H标签、P标签、div标签（白板）
行内，标签内容有多少就占多少空间。如span（白板）、a标签

在这里插入图片描述

4.1 特殊符号

https://www.cnblogs.com/bigberg/p/8422573.html

4.2 div和span

这两个标签属于html中最素的，他们本身没有携带太多的样式：

div，仅块级标签样式。
span，仅行内标签样式。

也恰恰正是因为他们是最素的，所以之后在对标签进行定制时会很方便

4.3 br 换行

br标签用于内容进行换行处理。

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<body>
	    <div style="background-color: red;">还记得你说家是唯一的城堡，<br />我记得，嗯，我记得</div>
	</body>
</html>

在这里插入图片描述

4.4 p 段落

p标签用于表示段落，段落和段落之间有些间距，一般用于多内容多段落展示，例如：文章、作文、博客等。

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>出师表</title>
	</head>
    <body>
        <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
        <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
        <p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
    </body>
</html>

在这里插入图片描述

4.5 h 标题系列

h标签用于展示标题数据（加大加粗的样式），h系列标签共有6种，从h1~h6依次变小。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <div>默认文字字体</div>
    </body>
</html>

在这里插入图片描述

4.6 a 超链接

a标签主要有两个作用：

做超链接，点击之后可以跳转到指定地址；

<_blank:在新页打开>
<a href="http://www.baidu.com" target="_blank" title="baidu">百度</a>

做锚点，点击后跳转到页面指定位置。

<!--锚-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>

4.7 img 图片

img标签用于显示图片。

<!--alt:找不到图片时显示-->
<img src="a.jpg" title="鼠标移到图片上显示的内容" style="height:200px;width:200px;" alt="not find"/>

4.8 ul 列表系列

在html中 ul、ol、dl用于展示列表数据。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        
        <dl>
            <dt>ttt</dt>
            <dd>ddd</dd>
            <dd>ddd</dd>
            <dd>ddd</dd>
            <dt>ttt</dt>
            <dd>ddd</dd>
            <dd>ddd</dd>
            <dd>ddd</dd>
        </dl>
    </body>
</html>

在这里插入图片描述

4.9 table 表格

表格基本显示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--border:边框与边框之间的宽度为1-->
        <table border="1">
            <tr>
                <td>主机名</td>
                <td>端口</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1.1.1</td>	
                <td>80</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>1.1.1</td>
                <td>80</td>
                <td>
                    <a href="http://www.baidu.com">查看详细</a>
                </td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述
合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--thead tbody，规范的，写这个，不要写上面的-->
<table border="1">
	<thead>
		<tr>
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
			<th>表头4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td colspan="2">2</td><!--这个td横跨占两个空间-->
			<td>3</td>
			<!--<td>4</td>-->
		</tr>
		<tr>
			<td rowspan="2">1</td> <!--这个td纵向占两个-->
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<!--<td>1</td>-->
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
</body>
</html>

在这里插入图片描述

4.10 label标签

点击文字，获取光标

<普通文本，结合input使用，for：与input创建关联,点击文字，获取光标>
<label for="user">用户名：</label>
<input id="username" type="text" name="user"/>

4.11 fieldset标签

一般用不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<fieldset>
	<legend>登录</legend>
	<label for="user">用户名：</label>
    <input id="username" type="text" name="user"/>
    <br/>
</fieldset>
</body>
</html>

在这里插入图片描述

4.12 input 系列【用户交互】

input系列中共有5个至关重要的标签，他为浏览器提供了数据交互的功能，即：用户可以在浏览器上输入数据和选择选项，以后可以把输入和选择的内容提交给后端。

text，文本框。
password，密码框。
radio，单选框（必须设置name属性相同，否则无法实现）。
checkbox，复选框。
file，文件上传。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h3>文本框</h3>
        <input type="text" name="" value="" /> <!--默认值-->

        <h3>密码框</h3>
        <input type="password" name="pwd" />

        <h3>单选框</h3>
        男：<input type="radio" name="gender" value="1" checked="checked"/> <!--单选框，name相同时只能二选一-->
        女：<input type="radio" name="gender" value="2"/> <!--后台根据value来进行区分到底选择了哪一个，后台得到的数据为gender=1或2-->

        <h3>复选框</h3>
        <!--多选框1,name属性批量获取数据-->
        篮球：<input type="checkbox" name="favor" value="1"/>
        足球：<input type="checkbox" name="favor" value="2" checked="checked"/> <!--设置了checked表示该框默认被选中-->
        <!--多选框2,-->
        撩妹：<input type="checkbox" name="skill" value="1"/>
        coding：<input type="checkbox" name="skill" value="2"/>

        <h3>上传文件</h3>
        <!--上传文件,依赖form表单的一个属性，enctype="multipart/form-data"-->
        <input type="file" name="fname">
    </body>
</html>

在这里插入图片描述
input还有两种提交按钮button和submit

<!--按钮-->
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>

4.13 textarea 多行文本框【用户交互】

textarea用于在浏览器上展示多行文本输入框。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--textarea,name属性-->
        <textarea name="meno" >默认值</textarea>
    </body>
</html>

4.14 select 下拉框【用户交互】

select标签用于在浏览器上展示下拉框。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--size把整个框放大了, multiple：多选-->
		<select name="city" multiple="multiple" size="10">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4" selected="selected">4</option>	
		</select>
		
		<select name="city" multiple="multiple" size="10">
			<optgroup label="zhejiang">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4" selected="selected">4</option>	
			</optgroup>
		</select>
    </body>
</html>

4.15 form 表单

在网站开发的过程中，用户可以使用上述【用户交互】相关的标签让用户输入内容，但如果想要再浏览器上把输入的内容提交到后台，则需要表单和提交按钮。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action="http://www.x.cn" method="get">
            <p>用户名：<input type="text" name="user"></p>
            <p>密  码：<input type="password" name="pwd"></p>
            <p>性别：
                <input type="radio" name="gender" value="2">男
                <input type="radio" name="gender" values="3">女
            <p/>
            <p>爱好：
                <input type="checkbox" name="favor" value="2">篮球
                <input type="checkbox" name="favor" value="8">足球
                <input type="checkbox" name="favor" value="10">橄榄球
            </p>
            <p>城市：
                <select name="city">
                    <option value="1">上海</option>
                    <option value="2">北京</option>
                </select>
            </p>
            <p>备注：<textarea> name="memo"></textarea></p>
            <input type="submit" value="提交"><!--用于提交当前所在的表单-->
            <input type="reset" value="重置"><!--用于重置当前标签中的选项-->
        </form>
    </body>
</html>

在这里插入图片描述
[1.提交时，只会提交form标签内部【用户交互】相关的标签。
[2.form标签内置属性

action=""，表示表单要提交的地址。
method=“get”，表示表单的提交方式(get 或 post)

- get的方式是把要提交的数据拼接在请求头url上面，发送给后台
- post的方式是把要提的数据构造成一种类似于字典的特殊的结构，没有放在url上，发送给后台

enctype=“multipart/form-data”，如果form内部有文件上传，必须加上此设置。

<form action="" method="get" enctype="multipart/form-data">
    <input type="file" name="xxxxx">
    <input type="submit" value="提交">
</form>

[3.form内部【用户交互】相关标签必须设置name，不然提交数据后后端无法获取。
[4.radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三种标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。

73、

关注

1
点赞
踩
1

收藏

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

目录1、本地查看2、基本结构3、head标签3.1 title 标题3.2 meta 文档字符编码3.3 meta 页面刷新3.4 meta 关键字3.5 meta 网站描述3.6 meta IE浏览器3.7 meta 触屏缩放3.8 link 图标3.9 link 导入css文件3.10 style 样式4、body标签4.1 特殊符号4.2 div和span4.3 br 换行4.4 p 段落4.5 h 标题系列HTML，称为超文本标记语言。不区分大小写。1、本地查看通过本地浏览器直接打开编写的h
复制链接

扫一扫