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值提交到后台。