HTML自学笔记
1、HTML
Hyper Text Markup Language
超文本标记语言
超文本：比普通文本更加强大，可以添加各种样式
标记语言：通过一组标签来对内容进行描述。
标签：<关键字>
<开始关键字>内容</结束关键字>
可嵌套
<h*>内容</h*>
//起着标题附加换行的作用，内容将被作为标题，*处应填数字，由1开始字号最大最突出，依次减小，到6为止
<br/>
//换行标签，是空标签，但建议使用以下的段落标签
<p>内容</p>
//有利于后续编辑
<b>内容</b>或<strong>内容</strong>
//加粗标签后者带语义，对搜索引擎友好
<i>内容</i>或<em>内容</em>
//斜体标签后者带语义，对搜索引擎友好
<!--内容-->
//注解
<hr/>
//显示贯穿页面的水平分割线font标签常用属性：
color：改变字体颜色
size:改变字体大小,最大为7
face:改变字体
eg:你好
<h1>送灵澈上人</h1>
<p><i><b>唐代：刘长卿</b></i></p>
<p>苍苍竹林寺，</p>
<p>杳杳钟声晚。</p>
<p>荷笠带斜阳，</p>
<p>青山独归远。</p>1）语法规范
常用快捷键
<!DOCTYPE html>
<!--
1、文档声明
2、根标签html
3、html文件主要包含头部分和体部分
头部分：放置一些页面信息
体部分：放置页面内容
4、通过标签来对内容进行描述，标签通常是由开始标签和结束
标签组成
5、标签不区分大小写，建议使用小写
-->
<html>
<head>
<meta charset="utf-8" /><!--放置网站的配置信息-->
<!--指定网站的编码方式-->
<title></title><!--指定网站标题-->
</head>
<body>
</body>
</html>
@案例1：在网页中显示如下信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学校简介</title>
<body>
<h2><font face="黑体">华南理工大学</font></h2>
<hr/>
<p><font color="darkblue">华南理工大学</font>是直属教育部的全国重点大学，坐落在南方名城广州，占地面积约391万平方米。校园分为三个校区，五山校区位于广州市天河区石牌高校区，校园内湖光山色、绿树繁花，民族式建筑与现代化楼群错落有致，文化底蕴深厚，是教育部命名的“文明校园”；大学城校区位于广州市番禺区广州大学城内，是一个环境优美、设施先进、管理完善、制度创新的现代化校园；广州国际校区位于广州市番禺区创新城，与广州大学城隔岸相望。三个校区交相辉映，是莘莘学子求学的理想之地。</p>
<p>华南理工大学原名华南工学院，组建于1952年全国高等学校院系调整时期，是以中山大学工学院、华南联合大学理工学院、岭南大学理工学院工科系及专业、广东工业专科学校为基础，调入湖南大学、武昌中华大学、武汉交通学院、南昌大学、广西大学等5所院校部分工科系及专业组建而成，1988年改为现名。学校办学历史悠久，作为组建基础的中山大学工学院源于1931年成立的国立中山大学理工学院；华南联合大学理工学院由1930年成立的私立广东国民大学工学院和1940年成立的私立广州大学理工学院合并而成；岭南大学理工学院可追溯至1930年成立的岭南大学工学院；广东工业专科学校的前身是1918年成立的广东省立第一甲种工业学校，其历史可追溯至1910年清政府创办的广东工艺局。这些院校是早期中国南方培养高级工程技术人才的摇篮和民主科学思想的重要策源地。</p>
<p>1960年，学校被评为全国文教战线先进单位，同年成为全国重点大学；1981年经国务院批准为首批博士和硕士学位授予单位；1993年在全国高校开部省共建之先河；1995年通过“211工程”部门预审，进入国家面向21世纪重点建设的大学行列；1999年底，通过教育部本科教学工作优秀评价，成为全国第一批“本科教学优秀学校”；同年，经科技部、教育部批准，成立国家大学科技园；2000年，经批准成立研究生院；2001年，实行新一轮部省重点共建，学校进入国家高水平大学建设（“985工程”）行列，2007年以优秀成绩通过教育部本科教学工作水平评价；2012年，进入上海交通大学“世界大学学术排名”500强；2013年1月，入选《中国大学评价》的“中国一流大学”行列；同年，再次进入上海交大“世界大学学术排名”；2016年在“世界大学学术排名”中，整体进入300强，工科领域排名跃升至全球第22名。</p>
<p>经过60多年的建设和发展，华南理工大学成为以工见长，理工结合，管、经、文、法、医等多学科协调发展的综合性研究型大学。轻工技术与工程、食品科学与工程、城乡规划学、材料科学与工程、建筑学、化学工程与技术、风景园林学等学科整体水平进入全国前十位。化学、材料学、工程学、农业科学、物理学、生物学与生物化学、计算机科学、环境科学与生态学、临床医学9个学科进入国际ESI全球排名前1%。学校办学条件良好，教学环境优良，治学严谨，秉承“博学慎思 明辨笃行”的校训，坚持高素质、“三创型（创新、创造、创业）”、具有国际视野的拔尖创新人才的培养目标，着力培养创新型、复合型人才。建校60多年来，学校为国家培养了高等教育各类学生38万多人，一大批毕业校友成为我国科技骨干、著名企业家和领导干部。</p>
</body>
</html>@案例2：显示图片
img:标签
src:指定路径，最好不要用中文
指定图片宽度，单位为像素，下同
height:指定图片高度
alt:文件加载失败时的提示信息
只调整宽或高浏览器将依照比例等比缩放
eg:
<img src="当前路径图片"/>
<img src="../img/aa.jpg" width="240px" height="225px" alt="图片加载失败，请重试"/>关于文件路径：
./代表的是当前路径，缺省即默认此方式
../代表的是上一级路径
../../再上一级
@案例3：友情链接
列表标签：
无序：ul.li是列表项,有type标签可设置样式,有三种可选
<ul type="square">
<li>百度一下</li>
<li>新浪微博</li>
</ul>有序：ol,有5个type属性；
start属性，设定从几开始
<ol type="a">
<li>百度一下</li>
<li>新浪微博</li>
</ol>@案例4：超链接
使用a和href标签,如以下例子，将覆盖原页面
href：指定要跳转去的链接地址，需加上http协议。如果访问的是本网站的html文件，可以直接写文件路径
打开链接网页
<ol>
<li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
<li><a href="https://weibo.com">新浪微博</a></li>
</ol>若要另开网页，使用target属性，_blank即可
默认打开方式是_self
@案例5：制作表格
表格标签table:
常用属性：
border:加边框，像素为单位
指定宽度
height:指定高度
bgcolor：设置背景色
background：设置背景
align:设置对齐方式,在table上加就是设置表格相对于页面的对齐方式，在tr或者td上加就是设置文本对齐方式
<td>列标签
<tr>行标签
//显示一个一行一列的表格
<table>
<tr>
<td></td>
</tr>
</table>
//显示一个一行四列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
//三行三列
<table border="1px" width="400px" bgcolor="Yellow" align="center">
<tr bgcolor="Blue">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td bgcolor="Pink">2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>表格的合并
colspan:跨列
rowspan:跨行，参数为所跨行的数目，上同
注意，要把被占用行或列的相关代码删去
//三行三列
<table border="1px" width="400px" bgcolor="Yellow" align="center">
<tr bgcolor="Blue">
<td colspan="2">10</td>
<td>12</td>
</tr>
<tr>
<td bgcolor="Pink" colspan="2" rowspan="2">20</td>
<td rowspan="2">22</td>
</tr>
<tr>
</tr>
</table>表格的嵌套
<table border="1px" width="400px" bgcolor="Yellow" align="center">
<tr bgcolor="Blue">
<td colspan="2">10</td>
<td>12</td>
</tr>
<tr>
<td bgcolor="Pink" colspan="2" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td rowspan="2">22</td>
</tr>
<tr>
</tr>
</table>@案例6:制作首页
步骤：
6)基本表单输入项
input标签
<input type="text"/>普通文本输入
<input type="password"/>输入密码
<input type="file"/>上传文件
<input type="radio"/>复选框
<input type="radio" name="sex"/>单选框
<input type="checkbox"/>//勾选框
<textarea>cols="" rows=""</textarea>//文本输入区域,可设置宽高
<select>
<option>内容</option>
<option>内容</option>
<option>内容</option>
</select>
下拉列表
<input type="submit" value="内容"/>
提交按钮，内容为按钮上文本
type="reset"重置按钮
type="button"普通按钮
type="hidden"隐藏域
name属性：提交后网址将显示相应内容，作为参数名称
id属性：给输入项取一个名字，以便于我们操作它
<input type="text" name=username/>
<input type="date"/>
下拉列表选择日期
<input type="number"/>
只能输入数字
<input type="tel"/>
弹出九宫格数字键盘
placeholder="文本"
显示输入提示
<form>需要提交的内容</form>
属性：action提交后跳转地址
method有get（默认，数据有限制）与post方式
post不会像get一样将相关信息拼接到跳转后的网址后，而是封装在请求体中
<input type="checkbox"/>阅读
<input type="checkbox"/>绘画
<input type="checkbox"/>朗诵</br>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女</br>
<textarea cols="20" rows="5"></textarea>7）框架标签
frameset
使用frameset时请删除body
<html>
<head>
<meta charset="utf-8" />
<title></title>
<frameset rows="15%,*">
<frame src="a.html"/>
<frameset cols="15%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>