1、HTML 超文本标记语言
- 在HTML中存在着大量的标签，我们用HTML提供的标签，将要显示在网页中的内容包含起来。就构成了我们的网页
- 有哪些东西由HTML决定，这些东西长什么样由CSS决定
- HTML+CSS=静态网页，JS+Jquery=动态网页
2、学习HTML需要准备什么
- HTML是通用语言（只需要浏览器和记事本）
- 记事本、NotePad++、EditPlus、……
- 网页三剑客（DreamWeaver、FireWorks、Flash）
- FrontPage
3、开始动手写HTML页面
- 首先在桌面上随便的建一个文件
- 将创建的文件的名称改为.htm/.html
- 开始写基本的框架标签
4、HTML的特性：
- 标签一般是成对的
- 不区分大小写
5、HTML基本标签
- HTML基本结构：
<html></html> - 段落标签：
<p></p>（代表一段，每段另起一行） - 空格标签：
- 标题标签：
<h#></h#>#=1~6 - 图片标签：
<img/>，可以自定义属性：
<img src="C:\Users\crg88\Desktop\2021-1.png" width="200px" height="200px" border="1px" title="还行" alt="加载失败"/>- 注释标签：
<!-- --> - 换行标签：
<br/> - 字体加粗：
<b></b> - 水平线：
<hr/> - 特殊符号：
大于号：>>
小于号：<<
与：&& - 字体标签：size=1~7（大小） color face（字体）
跳楼价<font size="6" color="red">1</font>元起- 预定义格式：
<pre> - 滚动：
<marquee>direction（方向） behavior（行为） 由于不兼容所以用得人少
6、HTML的属性
- 作用：表现各标签的特征
- 属性都是以“属性名=值”的形式出现
- 属性的值建议用引号括起来
- 一个标签可以有多个属性，用空格分开
7、HTML字体标签
- 粗体：
<b> - 意大利斜体：
<i> - 打字机文本：
<tt> - 下划线文本：
<u> - 上下标：
<sup>`` - 加删除线：
<s> - 定义强调文本：
<em> - 定义强调文本：
<strong> - 定义计算机代码文本：
<code> - 定义计算机代码样本：
<samp> - 定义键盘文本：
<kbd> - 定义文本的变量部分：
<var> - 定义定义项目：
<dfn> - 定义引用：
<cite> - 定义小号文本：
<small> - 定义大号文本：
<big>
8、a标签
- 作用：显示超链接
- href地址，a标签里面如果不写href那么展示的是黑色字体不是超链接样式，想要不填写地址也是超链接样式的话，href里面填#
- target是否新打开网页跳转（_blank新打开网页跳转，_self网页内跳转）
- 范例：
<a href="http://www.baidu.com" target="_blank">百度</a>- 实现页面内跳转
<a name="顶端" href="#底端">回到底端</a>
<a name="底端" href="#顶端">回到顶端</a>- 实现页面间跳转
<a href="4常用的标签.html#碗里来">快到碗里去</a>9、常用body属性
- text 控制文本颜色
- link 超链接的颜色
- alink 点击超链接时候的颜色
- vlink 点击超链接之后的颜色
- bgcolor 设置背景颜色
- background 设置背景图片
10、列表
- 无序列表
<ul type="disk">
<li>星期一</li>
<li>星期二</li>
</ul>- 有序列表
<ol type="I">
<li>星期一</li>
<li>星期二</li>
</ol>- 自定义列表
<dl>
<dt>面向对象</dt>
<dd>继承</dd>
<dd>封装</dd>
</dl>11、HTML表格
1. 基本语法：
<table border="1">
<tr>
<td>单元格内容</td>
</tr>
... ...
</table>2. 范例：两行三列的单元格
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><a href="#">超链接</a></td>
<td>星期一</td>
<td>哈哈哈</td>
</tr>
<tr>
<td>嗷呜</td>
<td>呜呜呜</td>
<td><img src="1.jpg" height="30px" width="30px"/></td>
</tr>
</table>3. 属性（不用深究，一般用CSS设置）
1. table属性
- border：单元格边框
- cellspacing：单元格之间距离
- cellpadding：单元内文字与边框距离
- bgcolor：背景颜色
- bordercolor：边框颜色
2. 单元格属性
- align：控制文字在单元格内水平位置（left、center、right）
- valign：控制文字在单元格内竖直位置（top、middle、bottom）
- bgcolor：背景颜色
- colspan：跨列
- rowspan：跨行
4. 单元格跨列
用colspan实现
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>5. 单元格跨行
用rowspan实现
<table border="1px" cellspacing="0px" cellpadding="0px" height="300px" width="300px">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>6. 其他：
<th></th>表示这是表格标题，自动加粗居中
评论