HTML
基本结构
<!-- 1、文档类型声明 -->
<!DOCTYPE html>
<!-- 2、HTML根标记 -->
<html>
<!-- 包含两对子元素-->
<head>
<title>网页标题</title>
<meta charset="utf-8"/>
</head>
<body text="red" bgcolor="yellow">
<p>我的第一个html页面</p>
</body>
</html>
文本
特殊文本的实现
-
页面的空格以及一些特殊字符需要通过转义字符的方式体现
表示一个空格<表示 <>表示 >©表示©
-
文本样式相关标记
<b></b>: 加粗<strong></strong>：强调加粗<i></i>: 斜体<em></em>：强调倾斜<u></u>: 下划线<ins></ins>：强调下划线<s></s>: 删除线<del></del>：强调删除线<sup></sup>: 上标<sub></sub>: 下标
-
标题元素
- 语法：
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>- 属性： align
- 设置文本水平对齐方式
- 取值：left / center / right
- 语法：
-
段落元素
- 语法：
- 属性：align : left / center / right
<!-- 段落标签 -->
<p>the first paragraph</p>
<p align="right">the second paragraph</p>
- 换行元素
<br>
- 分割线元素
- 作用：在页面中表现为一条直线
- 语法：
<hr> - 属性:
- size
- 尺寸，px为单位
- width
- 宽度，px为单位
- align
- 水平对齐方式
- color
- 颜色
- size
- 预格式化
- 作用：保留源文档中的回车和空格的作用
<pre></pre>
- 分区元素
- 块分区元素
- 语法：
<div></div> - 作用：布局
- 语法：
- 行内分区元素
- 语法：
<span></span> - 作用：设置同一行文字的不同样式
- 语法：
- 块分区元素
- 行内元素 与 块级元素
- 安装元素的表现形式来分为行内元素和块级元素
- 行内元素
- 在一行内允许显示多个元素，称为“行内元素”
- span ，i，em，strong，b，u，sub，sup
- 作用：包裹文本，处理文本的表现形式
- 块级元素
- 每个元素独占一行显示的。称为“块级元素”
- div，p，h1~h6
- 作用：布局
- 行内元素
- 注意：
- p标签不能嵌套其他块元素
- 行内元素中最好不要嵌套块级元素
- 图形和连接
-
URL
- 目录结构：
- 目录：保存文件的文件夹名称
- 什么是URL
- URL（Uniform Resource Location）,统一资源定位符
- 识别资源存放的位置
- URL在WEB中的表现形式：
- 绝对路径
- 特点：从文件的最高级目录处开始查找资源文件所经过的路径，就是绝对路径
- 完整的绝对路径分四部分：
- 使用场合，当要访问互联网上的资源时使用
- 协议名
- 域名（主机名，IP地址）
- 目录路径
- 文件名
- 相对路径
- 场合：使用本机文件时
- 从当前文件位置起查找指定文件的位置
- 根相对路径
- 路径形式是以 / 作为开始的
- / ：表示的是服务器的根路径
- 绝对路径
-
图像
- 图像格式
- *.gph
- *.gif(动图)
- *.png
- 图像的语法
- 标记：
<img> - 属性：
- src：指定要显示图像的URL
- width：图像的宽度
- height：图像的高度
- title：鼠标悬停时要显示的文本（提示）
- 标记：
- 图像格式
-
超链接
- 语法
- 标记：
<a>内容</a> - 属性：
- href:要连接的HTML页面的URL
- _target:指定新连接的打开形式
- 取值：
- _blank: 在新标签页面中打开网页
- _self: 在自身标签页面中打开新网页（默认值）
- 标记：
- 语法
-
连接的四种表现形式
- 点击操作时，完成资源下载操作（连接的资源为zip/rar时自动下载）
- 电子邮件连接
<a href="mailto:1354246500@qq.com">联系我们</a>- 必须在计算机中安装并配置好至少一个邮件客户端的信息
- 返回页面顶部的空连接
<a href="#">返回顶部</a>
- 执行JavaScript代码片段
<a href="javascript:JS脚本代码">执行JS</a>
- 锚点
- 作用:用于网页中的某个位置处理记号，允许从其他位置处跳转到记号位置处
- 使用方式
- 定义锚点
- 使用a标记的name属性定义锚点
- 任何标记的id属性定义锚点
- 链接到锚点
<a href="#锚点名称">链接到锚点</a><a href="页面URL#锚点名称">链接到锚点</a>
- 定义锚点
-
- 表格
- 表格的作用
- 按照一定的格式来显示数据
- 表格由单元格（行，列）组成
- 表格的语法
<table></table>：表示一个表格<tr></tr>：表示表格中的一行<td></td>：表示表格中的一列<th></th>：行/列标 题（加粗，水平居中）<caption></caption>：表格的标题，该元素必须添加在<table>之下，所以tr之上
- 表格的常用属性
- table
- width
- height
- align
- border：边框宽度，取值以px为单位的数值
- bgcolor
- cellspacing：单元格外边距（单元格与单元格或单元格与表格之间的距离）
- cellpadding：单元格内边距（单元格与内容的距离）
- tr
- align：控制当前内容的水平对齐方式
- valign：控制当前内容的垂直对齐方式（top/ middle/ bottom）
- bgcolor
- td / th
- align
- valign
- width
- height
- colspan：跨行
- rowspan：跨列
- table
- 表格的复杂应用
- 行分组：允许将若干行划分到一个组中，以便实现统一管理
- 表头行分组
- 允许将第一行的内容单独分到表头行分组中
<thead></thead>
- 表尾行分组
- 允许将最后一行的内容单独分到表尾行分组中
<tfoot></tfoot>
- 表主体行分组
<tbody></tbody>
- 表头行分组
- 不规则表格创建
- 通过 td 的跨行和跨列来实现不规则的表格
- 跨列
<td colspan="">- 从指定单元格位置处开始，横向向右，合并单元格（包含自己）被合并的单元，要删除
<td rowspan="">- 从指定单元格位置处开始，纵向向下，合并单元格（包含自己）被合并的单元，要删除
- 表格的嵌套
- 被嵌套的所以内容，只能放在td中
- 行分组：允许将若干行划分到一个组中，以便实现统一管理
- 表格的作用
- 列表
- 列表的分类和语法
- 列表的组成
- 由列表类型和列表项组成
- 分类 & 语法
- 有序列表
<ol></ol>–>Order List- 允许包含若干列表项：
<li></li>–>List Item
- 无序列表
<ul></ul>–>Unorder List- 允许包含若干列表项：
<li></li>–>List Item
- 有序列表
- 列表的组成
- 列表的分类和语法
37万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
