简介
html又叫做超文本标记语言,为网页提供了结构和内容。
示例1如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
<!DOCTYPE ***>为文档声明标签,用来指定所写代码为哪种html格式,一般可直接用<!DOCTYPE html>指定为html5格式;
<html lang="***">表明语言是什么,en为英文,zh-CN为中文;
<head> 标签用于定义文档的头部,它是所有头部元素的容器;
<meta charset="***">,用来指定字符集,例如ASCII码、汉文编码字符集GB2312,一般使用Unicode 万国码字符编码-UTF-8;
<title>标签用来显示网页的标题信息;
<body>用来显示网页内容。
其在浏览器显示结果如下:
html标签及用途
双标签:<标签 属性="属性值"> </标签>;
单标签:<标签 属性="属性值"/>。
标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
其在浏览器显示结果如下:
可见,标题独占一行,且都加粗,不同级别标题文字大小不同。
段落
双标签<p> </p>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
<p>这是第一段文本,66666666666666666666666666666666666666</p>
<p>这是第二段文本,888888888888888888888888888888888888888</p>
</body>
</html>
其在浏览器显示结果如下:
可见,不同段落具有一定间距。
换行
单标签<br>或<br/>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换行</title>
</head>
<body>
<p>这是第一段文本,<br>66666666666666666666666666666666666666</p>
<p>这是第二段文本,<br>888888888888888888888888888888888888888</p>
</body>
</html>
其在浏览器显示结果如下:
可见,换行的间距比不同段落间距小。
水平线
单标签<hr>,其标签属性有size:大小、color:颜色、width:宽度、align:位置、noshade:不需要属性值,用来去除阴影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平线</title>
</head>
<body>
<hr size="1" color="blue" width="900px" align="left">
<hr size="10">
<hr size="10" noshade="">
</body>
</html>
其在浏览器显示结果如下:
文本修饰标签
加粗
<b> </b>或<strong> </strong>,一般使用strong,其更突出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加粗</title>
</head>
<body>
<b>这是一段文本,66666666666666666666666666666666666666</b>
<br>
<strong>这是一段文本,66666666666666666666666666666666666666</strong>
</body>
</html>
其在浏览器显示结果如下:
倾斜
<i> </i>或<em> </em>,一般用em,其更突出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倾斜</title>
</head>
<body>
<i>这是一段文本,66666666666666666666666666666666666666</i>
<br>
<em>这是一段文本,66666666666666666666666666666666666666</em>
</body>
</html>
其在浏览器显示结果如下:
删除线
<s> </s>或<del> </del>,一般使用del。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除线</title>
</head>
<body>
<p>不要<s>999</s>,不要<del>99</del>,9.9包邮带回家!</p>
</body>
</html>
其在浏览器显示结果如下:
下划线
<u> </u>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下划线</title>
</head>
<body>
<p><u>9.9</u>包邮带回家!</p>
</body>
</html>
其在浏览器显示结果如下:
上下标
上标<sup> </sup>,下标<sub> </sub>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下标</title>
</head>
<body>
<p>深度学习卷积神经网络-AlexNet<sup>[1]</sup>、残差神经网络-ResNet<sub>[2]</sub></p>
</body>
</html>
其在浏览器显示结果如下:
字体
<font> </font>,标签属性包括size:字体大小;color:字体颜色;face:字体样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
</head>
<body>
<p><font size="10" color="blue" face="楷体">深度学习卷积神经网络</font></p>
</body>
</html>
其在浏览器显示结果如下:
div标签
用来划分页面区域,独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
<div>6666666</div>
<div>6666666</div>
<div>6666666</div>
</body>
</html>
其在浏览器显示结果如下:
span标签
在对文本独立修饰时,内容多宽就占用多宽距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span</title>
</head>
<body>
<h1><span style="color:blue">6666666</span><span style="color: aqua;">888</span></h1>
</body>
</html>
其在浏览器显示结果如下:
本例中加样式是为了做区分,以看出空间距离与内容宽度一样。
列表
无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>昨天</li>
<li>今天</li>
<li>明天</li>
</ul>
</body>
</html>
其在浏览器显示结果如下:
注意:
li里可以放标签,ul里只能放li。
默认为黑色实心圆点。
ul包括属性:
type:默认"disc"——实心圆点,square——实心方块,circle——空心圆,none——无。
有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol type="I" start="2">
<li>昨天</li>
<li>今天</li>
<li>明天</li>
</ol>
</body>
</html>
其在浏览器显示结果如下:
可见,其序号为从2开始的罗马数字。
注意:
li里可以随意放标签,ol里只能放li。
当不填写属性及属性值时,默认序号从1开始。
ol包括属性:
type:若为1,则以1、2、3排序;若为a,则以a、b、c排序;若为Ⅰ,则以Ⅰ、Ⅱ、Ⅲ排序;若为A,则以A、B、C排序;若为i,则以i、ii、iii排序。
start:表示从哪个开始,取值只能为数字,若以小写字母排序,从27开始,则序号为aa、ab、ac,以此类推。
自定义列表
一般用于图文混合列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>昨天</dt>
<dd>今天</dd>
</dl>
<dl>
<dt>昨天</dt>
<dd>今天</dd>
</dl>
</body>
</html>
其在浏览器显示结果如下:
图片
单标签<img>
包括属性:
src:图片地址。
当图片与html文件在同级目录时:
src="1.jpg";
src="./1.jpg";
src="D:\前端\1\1.jpg"(绝对路径一般不会用,当换机器运行会出现错误)。
当html文件与图片所在文件夹为同一级:
src="img/2.jpg";
src="./img/2.jpg"
当html所在文件夹与图片所在文件夹为同一级:
src="../1/img1/3.jpg"(../表示到与当前所在文件夹同一级的位置)
alt:当图片加载失败时显示文字。
width:图片宽度。
height:图片高度。
当只设置宽度(高度)时,图片高度(宽度)会根据图片比例随之改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<img src="../img/1.jpg" width="100" alt="图片" title="宽度为100的图片">
<img src="../img/2.jpg" height="50" alt="图片">
<img src="../img1/3.jmg" alt="这是张图片">
</body>
</html>
其在浏览器显示结果如下:
超链接
实现不同页面跳转。
<a href="要跳转的页面路径" title="鼠标停上去显示信息" target="在何处跳转页面">内容</a>。
target:默认为"_self",当前窗口跳转;"_blank",新窗口打开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com/" title="点击即可打开新窗口跳转百度" target="_blank">百度一下</a>
</body>
</html>
其在浏览器显示结果如下:
可见,点击“百度一下”,在浏览器新窗口打开了百度页面。
表格
<table> </table>。
<table> </table>中<th> </th>:定义表格的标题栏(文字加粗)。
<table> </table>中有几个<tr> </tr>表示表格中有几行,<tr> </tr>中有几个<td> </td>,表示这一行有几个单元格。
table包含属性:
width:表格宽度,属性值可为"**px"或"**%",其中百分比相对于父元素宽度百分比,比如表格的父元素为<body>,则宽度占窗口**%;若表格父元素为<span >,则占span所占空间宽度**%。
height:表格高度,属性值可为"**px"或"**%",但窗口默认高度为0。
border:外边框线宽度,属性值填数值即可。
bordercolor:外边框颜色。(不推荐,尽量不要使用,可在css完成)
bgcolor:表格背景颜色。(不推荐,尽量不要使用,可在css完成)
background:为整个表设置背景图像或仅为一个单元设置背景图像。(不推荐,尽量不要使用,可在css完成)
align:表格水平位置,为"left"时居左,"center"居中,"right"居右。
cellspacing:单元格与单元格间距。
cellpading:单元格与内容间距。
tr属性:
height:高度。
bgcolor:背景颜色。
align:文字水平对齐。
valign:文字垂直对齐,"top"文字在顶部,"middle"文字在垂直中部,"bottom"文字在垂直底部。
td属性:
width:宽度。(若一个单元格设置高度,影响整列;若一个单元格设置宽度,影响整行)
height:高度。
bgcolor:背景颜色。
align:文字水平对齐。
valign:文字垂直对齐,"top"文字在顶部,"middle"文字在垂直中部,"bottom"文字在垂直底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="50%" height="500px" border="1" bordercolor="green" bgcolor="pink" align="center" cellspacing="3" cellpading="10">
<tr height="200" bgcolor="blue" align="right" valign="center">
<td width="200" bgcolor="red" align="center" valign="bottom">1</td>
<td>2</td>
</tr>
<tr align="center" valign="center">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
其在浏览器显示结果如下:
合并单元格
colspan:将两个或多个列合并为一个列 。
rowspan:合并两行或更多行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格</title>
</head>
<body>
<table border="1" width="300" height="300">
<tr>
<td colspan="2">1</td>
<!--<td>2</td>-->
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<!-- <td>9</td> -->
</tr>9
</table>
</body>
</html>
其在浏览器显示结果如下:
表单
用来收集用户信息。
<form>
<input>
</form>
form属性:
action:表示向何处发送表单数据
method:"get"、"post"。
input属性:
type:
type="text" 文本框
type="password" 密码框
type="submit" 提交框,跟<button> </button>一样
type="button" 按钮框
type="reset" 重置框
placeholder:描述输入字段预期值的简短提示信息。
name:只有在name设置的情况下,提交表单,用户输入的数据才会发送到服务器。
value:显示文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com" method="post">
用户信息:<input type="text" placeholder="请输入用户信息" name="username">
<br>
密码:<input type="password" placeholder="请输入密码" name="mima">
<br>
<input type="submit" value="登录">
<button type="reset">清空</button>
</form>
</body>
</html>
其在浏览器显示结果如下:
pre
<pre> </pre>预格式化标签,保留空格、tab、回车。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre> xnuwffwhf
xscsc
</pre>
</body>
</html>
在浏览器显示如下:
表单进阶
单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>满意度如何</div>
<div>
<input type="radio" name="a" checked="checked">非常满意
</div>
<div>
<input type="radio" name="a">满意
</div>
<div>
<input type="radio" name="a">一般
</div>
<div>
<input type="radio" name="a">不满意
</div>
<div>性别</div>
<div>
<input type="radio" name="b" id="man">
<label for="man">男</label>
</div>
<div>
<input type="radio" name="b" id="woman">
<label for="woman">女</label>
</div>
</body>
</html>
当checked="checked"或checked,默认选择该选项;
当name属性值一样,则为同一问题的选项;
当<label for="man">男</label>,则点击文字也可以选择选项。
多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>兴趣爱好</div>
<div>
<input type="checkbox" name="a">抽烟
<input type="checkbox" name="a" checked="checked">喝酒
<input type="checkbox" name="a" checked>烫头
</div>
<div>擅长技术</div>
<div>
<input type="checkbox" name="b" id="html">
<label for="html">html</label>
<input type="checkbox" name="b" id="css">
<label for="css">css</label>
<input type="checkbox" name="b" id="js">
<label for="js">js</label>
</div>
</body>
</html>
上传文件和隐藏字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<div>截图说明</div>
<div>
<input type="file" name="" id="">
</div>
<div>图片按钮</div>
<form action="">
<input type="image" src="submit.jpg">
</form>
</div>
<div>
<div>隐藏按钮</div>
<input type="hidden" name="" id="" value="带给后端的个人信息">
</div>
<div>禁用,只读</div>
<div>
<button disabled="disabled">注册</button>
<br>
<input type="radio" disabled>不满意
<br>
<input type="text" disabled value="1111111">
<input type="text" readonly value="22222">
</div>
</body>
</html>
input type="file"表示上传文件;
form里input type="image"表示可以点击图片提交;
input type="hidden"表示隐藏
disabled="disabled"或disabled表示禁用
readonly表示只读。
下拉菜单
select属性:
size="3"表示显示3个选项(可以下拉看其他选项);
multiple表示多选。
option属性:
value:提供给后端要用的value值;
select:默认选择,只能选择一个,不然会后边覆盖前边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<div>收货地址</div>
<select size="3">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="hb" selected>河北</option>
<option value="sd">山东</option>
<option value="js">江苏</option>
</select>
</div>
<div>
<select size="3" multiple>
<option>苹果</option>
<option>香蕉</option>
<option>橘子</option>
<option>葡萄</option>
<option>菠萝</option>
</select>
</div>
</body>
</html>
文本域
textarea
cols="10"输入显示列数
rows="10"输入显示行数
若对textarea设置宽和高则需要CSS。
placeholder=""里边为预置提示文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<textarea cols="10" rows="10" placeholder="请输入你的意见"></textarea>
</div>
<div>
<textarea cols="10" rows="10" placeholder="请输入你的意见">意见是:</textarea>
</div>
</body>
</html>
字段集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>性别</legend>
<input type="radio" name="a">男
<br>
<input type="radio" name="a">女
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="b">抽烟
<br>
<input type="checkbox" name="b">喝酒
</fieldset>
</body>
</html>
特殊符号的表示
尖角号
用<表示左尖角号,用>表示右尖角号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尖角号</title>
</head>
<body>
<p>表示换行的方式是<br></p>
</body>
</html>
其在浏览器显示结果如下:
空格
受字体影响;
 不受字体影响,宽度为一个汉字宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空格</title>
</head>
<body>
<p>我我我 我我我<br>我我我 我我我</p>
</body>
</html>
其在浏览器显示结果如下:
版权
用©表示©。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版权</title>
</head>
<body>
<p>版权©</p>
</body>
</html>
其在浏览器显示结果如下:
商标
™表示™;
®表示®。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商标</title>
</head>
<body>
<p>商标™<br>商标®</p>
</body>
</html>
其在浏览器显示结果如下: