Web开发之HTML知识点总结
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发之HTML知识点总结相关的知识，希望对你有一定的参考价值。
html是超文本标记语言，用来写静态网页的语言，是设计页面的基础，由标签组成的语言，能展示超文本效果，即可以展示图片，由样式的文字，带跳转页面的文字等。HTML文件直接由浏览器解析，无需编译，正常由上到下执行，一般的HTML标签是开始标签和结束标签包裹内容体，当然也有空标签。
目录
1-HTML的字体标签和格式化标签
HTML可以设置字体大小和字体颜色，字体类型等，可以设置标题类型 ，设置空格，换行，设置段落标签等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体标签和和格式化标签</title>
</head>
<body>
<!--分别设置了颜色，大小和字体，换行-->
<font color="red" size="7" face="宋体">早上好！！！</font><br/>
<!--标题标签-->
<h1>静夜思,这是1级标题</h1>
<h2>静夜思,这是2级标题</h2>
<h3>静夜思,这是3级标题</h3>
<h4>静夜思,这是4级标题</h4>
<h5>静夜思,这是5级标题</h5>
<h6>静夜思,这是6级标题</h6>
<!--段落标签p-->
<p>这是默认居左的段落标签</p>
<p align="center"> 这是居中的段落标签</p>
<p align="right"> 这是居右的段落标签</p>
<!--空格段落标签-->
在李和白字间加空格,李 白
<!--这是HTML的注释，该注释仅在源码中可以看到，具体的页面不显示-->
</body>
</html>2-HTML之图片标签
HTML的图片标签可以用于加载本地图片和网页上的图片，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的图片标签</title>
</head>
<body>
<!--设置三个分别为图片路径,图片宽度和图片的高度-->
<img src="../a.jpg" width="100px" height="100px"/>
<img src="../b.jpg" width="50%" height="50%"/>
<!--加载网站上的图片-->
<img src="https://www.51tietu.net/qingchungirl/190327.html" width="500px" height="500px">
</body>
</html>3-HTML之列表标签
HTML的列表标签主要包括无序列表和有序列表两种，具体如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的列表标签</title>
</head>
<body>
<!--li是列表项目标签-->
<!--ul是无序列表-->
<ul>
<li>无序列表行1</li>
<li>无序列表行2</li>
<li>无序列表行3</li>
<li>无序列表行4</li>
</ul>
<!--ol是有序列表-->
<ol>
<li>有序列表行1</li>
<li>有序列表行2</li>
<li>有序列表行3</li>
<li>有序列表行4</li>
</ol>
</body>
</html>4-HTML之超链接标签
HTML的超链接的可以链接到外网的网页地址，也可以是HTML页面，也可以链接到一张图片等，超链接的内容可以是文字或者图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的超链接标签</title>
</head>
<body>
<!--这是HTML的超链接标签-->
<a href="ziti.html">这是跳转到另一个HTML的链接</a>
<a href="http://www.baidu.com">这是跳转到百度首页的链接</a>
<!--超链接的内容是一张图片-->
<a href="http://www.baidu.com">
<img src="../a.jpg" width="100px" height="100px">
</a>
<!--链接到一张图片-->
<a href="../a.jpg">链接到一张图片</a>
</body>
</html>5-HTML之表格标签
HTML的表格标签可以设置表格宽度，线框，设置表头单元格，设置跨行和跨列合并等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的表格标签</title>
</head>
<!--这是一个表格标签,tr表示行,td表示列,th设置为表头单元格-->
<body>
<!--board设置线框粗细,width设置表格宽度-->
<table border="1px" width="100%">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>89</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>97</td>
<!--跨行合并-->
<td rowspan="2">78</td>
</tr>
<tr>
<!--跨列合并-->
<td colspan="2">王五</td>
<td>97</td>
</tr>
</table>
</body>
</html>6-HTML之块标签
HTML的快标签主要包含行级快标签span和块级块标签div，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的块标签</title>
</head>
<body>
<span>这是行级快标签,有多少内容就会占用多少空间</span>
<span>这个标签不会自动换行,适用于少量数据的展示</span>
<div>这是块级的块标签,默认占满一行</div>
<div>该标签会自动换行,适用于大量数据的展示</div>
</body>
</html>7-HTML之表单标签
HTML的表单标签为form标签，主要包括文本框，密码框，单选框，复选框，文件框，多选列表，文本域，提交按钮，重置按钮等。form表单中,action表示提交到的位置,method表示提交的方法,get和post两种，get方法会将参数拼接到地址栏，适合少量数据的提交，post方式的提交参数不会拼接地址栏,适合当量的数据提交,相对比较安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的表单标签</title>
</head>
<body>
<!--form表单中,action表示提交到的位置,method表示提交的方法,get和post两种-->
<!--get方法会将参数拼接到地址栏，适合少量数据的提交-->
<!--post方式的提交不会拼接地址栏,适合当量的数据提交,相对比较安全-->
<form action="biaoge.html" method="get">
uid:<input type="hidden" name="uid" value="wang"/><br/>
用户名:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br/>
性别:<input type="radio" name="sex" value="man" checked="checked">男
<input type="radio" name="sex" value="woman">女<br/>
爱好:<input type="checkbox" name="hobby" value="programming" checked="checked"/>编程
<input type="checkbox" name="hobby" value="run"/>跑步
<input type="checkbox" name="hobby" value="read"/>阅读<br/>
只读:<input type="text" name="name1" value="****" readonly="readonly"/><br/>
不可用:<input type="text" name="name2" value="*****" disabled="disabled"/><br/>
照片:<input type="file" name="file"/><br/><br/><br/>
城市:<select name="city" multiple="multiple">
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="hangzhou">杭州</option>
</select><br/><br/>
个人简介:<textarea name="short"></textarea><br/><br/><br/>
<input type="submit" value="提交">
<input type="reset" value="重置表单">
<input type="button" value="普通按钮">
</form>
</body>
</html>以上是关于Web开发之HTML知识点总结的主要内容，如果未能解决你的问题，请参考以下文章