HTML常用标签
基本结构：
<!DOCTYPE html> <!--文档-->
<html>
<head>
<title>My first</title> <!--标题，作为网页的标题，显示在浏览器顶部-->
</head>
<body> <!--只有这部分的内容显示在网页上-->
<p>这是第一个段落。</p>
</body>
</html>
标签
分类
- 双标签——包含开标签、关标签，如：
<p></p> - 单标签 ——如：
<br>
常用标签
1. 标题：
<h1>标题</h1> <!--六级标题标签，从1~6，大小递减-->
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
显示如下：
标题
标题
标题
标题
标题
标题
2. 段落：
<p>这是段落1</p> <!--会自动换行-->
<p>这是段落2</p>
显示如下：
这是段落1
这是段落2
3. 超链接：
<a href="https://baidu.com" target="_blank">百度</a> <!--href:指跳到哪个链接，两个a之间放提示内容,当鼠标的光标移到内容上，光标会变成小手，点击即跳转;target:指新页面在哪里打开，_blank属性表示在新的窗口-->
<a href="#">空链接</a> <!--空链接用于刚创建网页，还没写好链接页面，暂时代替链接，还可以和id联合使用，跳转到某个页面的某一个位置，如：回到顶部-->
<a href="script">Script链接</a> <!--也是空链接-->
4.图像：
<img src="http://resource.okhqb.com/public/e7/7a/e77a96b36bc33bd3cb97a78c7c38b4a7.jpg" height="200px" width="250px" alt="乔布斯" title="苹果创始人">
<!--src:指图片存放的链接或者存放的路径，height和width：指图片的宽高，通常只设置其中一个，另一个则按原图片的宽高比例伸缩，设置两个时，若比例不对，则图片会出现变形，alt:指图片显示不了的时候（比如：src错误了），内容代替图片，title：指当鼠标放到图片上时，显示title中的内容。-->
重点
img标签与a标签联合使用，可用图片表示内容，点击图片实现跳转。
<a href="https://baidu.com" ><img src="https://i-blog.csdnimg.cn/blog_migrate/5f8dcf06d74b796a51269303a0d2e07b.png" title="百度" height="100px"></a>
显示如下：
5.注释
<!--这是注释-->
注释是不会显示在网页中的，只是用于让程序员更好的理解代码，提高代码的可读性。
6.换行 <br>
7.下划线<hr>
<hr size="20px" width="80%" color="red" align="center"> <!--width:指线的宽度；color：颜色；size：尺寸；align:对齐-->
显示如下：
8.加粗强调
<p>我是文字1</p>
<strong>我是文字2</strong>
<b>我是文字3</b>
显示如下：
我是文字1
我是文字2
我是文字3
9.斜体
<em>我是文字1</em>
<i>我是文字2</i>
strong代替了b标签，strong还表示强调的意义；em代替了i标签,也有表示强调的意义，由于强调内容与样式分离，b标签、i标签不提倡使用。
显示如下：
我是文字1
我是文字2
10. 头标签、主体标签
head标签内，通常放<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>标签
- title 标签定义了该网页的标题，显示在浏览器的顶部
- style标签定义了HTML文档的样式文件引用地址
- meta标签描述了一些基本的元数据。
meta标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于 <head></head>区域中
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30" url=https://www.baidu.com>
<!--如果没有url属性，每30秒刷新当前页面，有url属性，每30秒自动跳转到url指定的网页-->
- link 标签定义了文档与外部资源之间的关系，通常用于链接到样式表
- script标签用于加载脚本文件
- base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title> <!--网页的标题-->
<style type="text/css">
body {background-color:yellow} <!--标签选择器-->
p {color:blue}
</style>
<base href="https://baidu.com" target="_blank"> <!--默认链接-->
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!--外部资源-->
</head>
<body>
<p>The content of the document......</p>
</body>
</html>
11.表格
表格的基本结构：
<table>…</table>：定义表格
<caption></caption> 定义表格标题
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
<col></col> 定义用于表格列的属性
<thead></thead> 定义表格的页眉
<tbody></tbody> 定义表格的主体
<tfoot></tfoot> 定义表格的页脚
thead、tbody、tfoot、th的效果皆可以用td来实现，通过CSS设置相应的样式即可。
主要属性：
colspan：列合并
rowspan：行合并
<table border="1" align="center"> <!--border:设置表格的边框；align:设置表格的对其方式-->
<caption>成绩表<caption>
<tr>
<th>姓名</th>
<th>科目</th>
<th>考试成绩</th>
<th>平时成绩</th>
</tr>
<tr>
<td>小红</td>
<td>数学</td>
<td colspan="2">90</td> <!--colspan:同一行的列合并，少写右面的列-->
</tr>
<tr>
<td rowspan="2">小刚</td> <!--rowspan:同一列的行合并，下面的行少写列-->
<td>数学</td>
<td>89</td>
<td>93</td>
</tr>
<tr>
<td>语文</td>
<td>87</td>
<td>91</td>
</tr>
</table>
显示如下：
| 姓名 | 科目 | 考试成绩 | 平时成绩 |
|---|---|---|---|
| 小红 | 数学 | 90 | |
| 小刚 | 数学 | 89 | 93 |
| 语文 | 87 | 91 | |
由于markdown与html的显示有一点点的不同，代码显示的结果应该如下：
12.列表
无序列表
<ul> <!--无序列表-->
<p>水果</p>
<li>苹果</li> <!--每一个小例-->
<li>梨子</li>
<li>香蕉</li>
</ul>
显示如下：
水果
- 苹果
- 梨子
- 香蕉
有序列表
<ol> <!--有序列表-->
<p>水果</p>
<li>苹果</li> <!--每一个小例-->
<li>梨子</li>
<li>香蕉</li>
</ol>
显示如下：
水果
- 苹果
- 梨子
- 香蕉
自定义列表
<dl> <!--定义列表-->
<dt>水果</dt> <!--主体-->
<dd>种类多</dd> <!--每一个描述-->
<dd>营养丰富</dd>
<dd>好吃</dd>
<dt>手机</dt> <!--主体-->
<dd>功能多</dd> <!--每一个描述-->
<dd>便于交流</dd>
<dd>丰富生活</dd>
</dl>
-
水果
- 种类多
- 营养丰富
- 好吃 手机
- 功能多
- 便于交流
- 丰富生活
13.表单
<h4 align="center">学生信息注册</h4> <!--标题-->
<form action="" name="std">
<table>
<tr>
<td>姓名：</td><td><input type="text" name="stdName" id="stdName" placeholder="请输入姓名"/></td>
</tr>
<tr>
<td>性别：</td><td><input type="radio" name="stdSex" id="stdSex" value="" />男</td>
<td><input type="radio" name="stdSex" id="stdSex" value="" />女</td>
</tr>
<tr>
<td>出生日期：</td><td><input type="text" name="stuBirthday" id="stuBirthday" value="" /></td>
<td>按格式yyyy-mm-dd</td>
</tr>
<tr>
<td>学校：</td><td><input type="text" name="stdSchool" id="stdSchool" value="" /></td>
</tr>
<tr>
<td>专业：</td><td><select name="std">
<option value="">计算机科学与技术</option>
<option value="">网络工程</option>
<option value="">物联网工程</option>
<option value="">应用数学</option>
</select></td>
</tr>
<tr>
<td>体育特长：</td><td colspan="2"><input type="checkbox" name="stdCheck"/>篮球
<input type="checkbox" name="stdCheck"/>排球
<input type="checkbox" name="stdCheck"/>足球
<input type="checkbox" name="stdCheck"/>游泳</td>
</tr>
<tr>
<td>上传照片</td><td colspan="2"><input type="file" /></td>
</tr>
<tr>
<td>密码</td><td><input type="password" /></td>
</tr>
<tr>
<td>个人介绍</td><td colspan="2"><textarea name="Letter" rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="" id="" value="提交" /><input type="reset" name="" id="" value="取消" /></td>
</tr>
</table>
</form>
<!--
1.表单的格式：
<form action="">
表单元素
</form>
2.input的属性：（1）type的值：
文本：text，可用colspan,rowspan控制文本框的大小
密码：password
单选：radio ，加上同一个name为单选，name不同时，没有单选的功能，默认加上checked
多选：checkbox， 默认已选中 checked
提交、重置按钮：
<input tepy="submit" />
<input tepy="reset" />
图像按钮：有图片代替按钮
<input tepy="image" src="图片路径">
文件上传：
<input type="file" name="命名" size="尺寸" maxlength="最大长度"/>
隐藏域：用户不能在其中输入信息，用于预定某些要传递的信息
<input tepy="hidden" /> 不会显示
3.action:提交地址
如：action="https:www.baidu.com"
4.method：提交方式 get post
1)get:通过URL传输数据，相对不安全，数据大小有限制；
2）post：相对安全，数据大小无限制，
5.value的意义：默认已输入
6.name:命名
7.下拉框：
<select name="std">
<option value="">计算机科学与技术</option>
<option value="">网络工程</option>
<option value="">物联网工程</option>
<option value="">应用数学</option>
</select>
-->
显示如下：
14.框架
1.窗口分割与设置
窗口分割可以垂直分割、水平分割、嵌套分割。
分割窗口的语法结构：
<frameset rows="高度1，高度2..." 或 cols="宽度1、宽度2..."> <!--高度、宽度可以用像素值或百分比表示;通常最后一个值，用*表示，自适应-->
<frameset src="网页1">
<frameset src="网页2">
...
</frameset>
2.子窗口的设置
<frameset src="html文件的位置" name="子窗口的名称" scrolling="yes"或"no"或"auto">
scrolling属性：设置是否显示滚动条
3.target属性
如果子窗口中含有超链接，点击时，希望链接的网页显示在别的子窗口，可以使用target属性。
主窗口
<!DOCTYPE html>
<html>
<frameset rows="30%,*">
<frame src="index.html"/>
<frameset cols="40%,*">
<frame src="frame2.html"/>
<frame name="f3"/>
</frameset>
<frame />
</frameset>
</html>
子窗口1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>桂工</title>
</head>
<body background="img/4ce0a13016de1c38ab83290ba64beda88f78f7f216fcb-jIc6Cg_fw580.jpg">
<h1 style="color: yellow;"align="center">桂林理工大学</h1>
<p align="center">
<a href="http://baidu.com" style="color: red;" target="f3">桂林理工大学是广西自治区的高校。</a>
</p>
</body>
</html>
子窗口2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>f2</title>
</head>
<body>
<a href="姓名.html" target="f3">校名</a>
<br />
<a href="地址.html" target="f3">校址</a>
</body>
</html>
超链接内容1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
桂林理工大学
</body>
</html>
超链接内容2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
广西壮族自治区桂林市
</body>
</html>
显示如下
好习惯：
- 使用小写字母书写HTML标签
结语：内容有点乱，希望下次能好好整理一下！
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
