HTML
HTML概述：
HTML是超文本标记语言
超文本：指页面内包括图片、链接、声音、视频、等内容
标记：标志(通过标记符号来告诉浏览器网页内容该如何显示)
HTML语言将我们需要显示的内容显示到计算机上，但HTML语言本身并不显示
-
web浏览器根据不同的HTML标签，解析成我们想要的网页效果
HTML的基本语法
1.Head标签包含了所有头部标签
头部区域的标签为：<title>，<style>,<meta>,<link>,<script>,<base>
-
定义网页标题标签<title>
一个基本html的基本结构如下：
<html> <head> <title>网页标题<title> </head> <body> Hello world! </body> </html>
解释：<html>...<html>标签标记了HTML开始与结束
<head>...<head>标记了标签和其他说明信息
<body>...<body>标记包含文本图像和链接
注释：<!--注释内容-->注释后地内容不会出现在网页上
-
标签
HTML中的标记指的就是标签
HTML使用标记标签来描述网页
标签分类：1.闭合标签 <标签名>标签内容<标签名>
2.自闭合标签 <标签名>自闭合标签（无标签内容）
标签属性：标签拥有属性，属性进一步说明该标签的显示和使用
①属性格式：属性名="属性值"
②属性位置：
<标签名 属性名="属性值">xxx</标签名>
③添加多个属性：
<标签名 属性名="属性值" 属性名="属性值">xxx</标签名>
基本常用标签：
-
标题标签：<h1></h1>...<h2></h2>
-
段落标签：<p></p>
-
换行标签：
-
列表：
无序列表<ul><li></li></ul>
无序列表是项目的一个列表，在默认状态下，此项目使用粗体圆点(典型的小黑圆圈)进行标记
拓展：①：如果想改变标记可使用disc创建一个小黑圆圈无序列表
<h5>disc样式：小黑圆圈<h5> <p> 你最喜欢什么茶？ <ul type="disc"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ul> </p>
②：circle创建一个空心小圆圈无序列表
<h5>disc样式：小黑圆圈<h5> <p> 你最喜欢什么茶？ <ul type="disc"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ul> </p>
③：square创建一个黑色小方块无序列表
<h5>square样式：黑色小方块<h5> <p> 你最喜欢什么茶？ <ul type="square"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ul> </p>
有序列表<ol><li></li></ul>
<h5>以数字标记的有序序列<h5> <p> 你最喜欢什么茶？ <ol> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ol> </p>
①：创建一个以大写字母标记的有序列表
<h5>以大写字母标记的有序序列<h5> <p> 你最喜欢什么茶？ <ol type="A"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ol> </p>
②：创建一个以小写字母标记的有序列表
<h5>以小写字母标记的有序序列<h5> <p> 你最喜欢什么茶？ <ol type="a"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ol> </p
③：创建一个以罗马字母标记的有序列表
<h5>以小写罗马字母标记的有序序列<h5> <p> 你最喜欢什么茶？ <ol type="i"> <li>金丝皇菊茶</li> <li>黄山毛峰茶</li> <li>西湖龙井茶</li> </ol> </p
-
超链接：<a><a>
a标签：HTML使用的是超级链接与网络上的另一个文档相连，通俗来说就是通过连接来访问其他网页资源。
例： 百度
登录
先定义链接地址，后面说明链接文档的位置
target：默认值为_self
href(Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
-
图像标签：<img/>
<body>
<img src="img/demo.jpg" width="300" height="150" "border=1"/>
<body>
解释：src后是图像的路径 width定义图像的宽度 height定义图像的高度 border定义图像的边框
-
图像的宽高一般不建议使用
-
-
特殊符号转义
在HTML中一些字符带有特殊含义。这些字符是不可以在网页中使用的
例如<和>,我们不可以在网页中直接使用，因为浏览器会把它解析为html签
为了可以使用这些字符，我们可以使用HTML中使用字符转义
-
小于号<：<
-
版权(C)：©
-
大于号：>
-
商标(TM)：& trade;
-
空格：&nasp
-
注册商标(R)：®
表格
-
表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签：表格的表头
td标签：表格单元格
1.表格的定义：
<table>标签定义HTML表格，简单的HTML表格由table元素以及一个或者多个<tr>、<th>或<td>元素主城表格结构，其中：<tr>元素定义表格行，<th>元素定义表头，<td>元素定义表格单元。为了让表格更美观，我们会用到：border，colspan，rowsoan，align，bgcolor等来美化表格
2.表格的标签：
在HTML定义表格的时候，有一下标签供我们使用
| NO | 表格标签 | 用处 |
|---|---|---|
| 1 | <table> | 定义表格，生成的表格在一对<table></table>中 |
| 2 | <caption> | 定义表格标题，当表格需要标题时，使用<caption>表格 标题</caption> |
| 3 | <thead> | 定义表格的页眉 |
| 4 | <tbody> | 定义表格的主题体 |
| 5 | <tfoot> | 定义表格的页脚 |
| 6 | <th> | 定义表格的表头，一般是表头的内容会被加黑 |
| 7 | <tr> | 定义表格的行 |
| 8 | <td> | 定义表格单元格 |
| 9 | <col> | 定义用于表格列的属性 |
| 10 | <colgroup> | 定义表格列的组 |
3.单元格边框
表格边框：在使用<table border="1"></table>的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框例子
<!--无边框--> <table> <tr> <th>编号</th> <th>姓名</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>马里奥</td> <td>男</td> </tr> <tr> <td>2</td> <td>桃花公主</td> <td>女</td> </tr> <br> <!--边框宽度为二--> <table border="2"> <tr> <th>编号</th> <th>姓名</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>马里奥</td> <td>男</td> </tr> <tr> <td>2</td> <td>桃花公主</td> <td>女</td> </tr> <br> <!--边框宽度为10--> <table border="10"> <tr> <th>编号</th> <th>姓名</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>马里奥</td> <td>男</td> </tr> <tr> <td>2</td> <td>桃花公主</td> <td>女</td> </tr>
4.合并行单元格
合并单元格时，合并行使用：colspan="2";合并列使用：rowspan="2"(这里2表示合并两个单元格)
<html> <head> <meta charset="utf-8"> <title>HTML表格合并单元格</title> </head> <body> <h4>合并行单元格:</h4> <table border="1"> <caption>通讯录</caption> <tr> <th>姓名</th> <th colspan="2">邮箱</th> </tr> <tr> <td>han qi xuan</td> <td>123456789@qq.com</td> <td>123456789@163.com</td> </tr> </table> </body> </html>
合并列单元格(colspan)
<html> <head> <meta charset="utf-8"> <title>HTML表格合并列单元格</title> </head> <body> <h4>合并列单元格</h4> <table borger="1"> <tr> <th>姓名</th> <th>YANG YANG</th> </tr> <tr> <th rowspan="3">邮箱</th> <td>123456789@qq.com</td> </tr> <tr> <td>123456788@qq.com</td> </tr> <tr> <td>1234656798@qq.com</td> </tr> </table> </body> </html>
