HTML
超文本标记语言 HyperText Markup Language
HTML基础
基本结构
1、头部信息 – head
2、网页内容 网页主体内容 – body
3、整个html文件 – html
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html标签的属性
语法：<标签名 属性名1=”属性值1” 属性名2=”属性值2” …>自己的文本</标签名>
DOCTYPE 文档类型声明
1、声明必须放置到文档第一行
2、<!DOCTYPE>声明不是html标签
注释： 快捷键 CTRL+/
文字和段落
1、标题标签:<h1></h1><h2></h2><h3></h3>~<h6></h6>
2、段落标签：<p></p>
属性： align属性：
left 左对齐内容
Right 右对齐
Center 居中
Justify 对行进行伸展，这样每行都可以有相等的长度
3、换行标签：<br/>
换行不换段
修饰标签：
1、水平线（分割线）：<hr/>
2、文字斜体：<i></i> <em></em>
3、加粗：<b></b> <strong></strong>
4、下标：<sub>
5、上标：<sup>
特殊符号：
1、< < 小于号
2、> > 大于号
3、®； 已注册
4、© 版权 ©
5、™ 商标 ™
6、 ； 空格
列表标签
1、无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
2、有序列表
<ol>
<li></li>
</ol>
属性 type
1、1 数字1，2。。
2、a 小写字母：a b c
3、A ABC
4、i 小写罗马数字i ii iii
5、I 大写罗马数字 I II III
3、自定义列表
<dl>
<dt>标题1</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dt>标题2</dt>
<dd>描述1</dd>
<dd>描述2</dd>
</dl>
-
标题1
- 描述1
- 描述2 标题2
- 描述1
- 描述2
图像标签
<img src=”” alt=””/>
img属性：
Src（必须） url 显示图像的地址
Alt 文字 图像替代的文本
Height 数值和百分比 图像的高度 -- px像素 20%百分比
Width 数值和百分比 图像的宽度 -- px像素 20%百分比 -- 该图片占据父容器的百分之多少
Src路径：
1、绝对路径：指的是具体盘符下的路径
2、相对路径: 指的是相对于当前文件夹的这个图片的路径
相对路径分为3种情况：
1、html文件和1.jpg处于同一级目录
2、1.jpg处于html文件的下一级
3、1.jpg处于html文件的上一级 …/…/…/
何时显示alt属性
1、 网速太慢
2、src属性值错误
3、 浏览器禁用图像
超链接 – 锚链接
语法：<a href=” ”>内容
href：链接地址，可以是内部文件链接，可以是外部文件链接
target：链接的目标窗口 （ _self _blank ） _top _parent – 用在框架里
title:链接提示的文字
name:链接命名 — 通过href定义，去跳转到name锚点定义的位置；# 空链接 – 表示既想有链接效果存在，但是又不知道跳转到哪里！
同一个页面内部跳转
<a href=”#锚名1”>目录1</a>
<a href=”#锚名2”>目录2</a>
<a href=”...” name=”锚名1”>内容1</a>
Xxxxxxxxxxxxxxxxxxx
<a href=”...” name=”锚名2”>内容2</a>
Xxxxxxxxxxxxxxxxxxx
不同页面的锚链接
网页1：<a href=”网页2#锚名”>.......</a>
网页2：<a name=”锚名”>.....</a>
电子邮件链接
<a href=”mailto:邮件地址”>........</a>
文件下载:
语法：<a href="下载文件的地址">...</a>
1、如果路径是地址，打开的相应的地址。
2、如果是文件，就会进行下载。
HTML表格
Table – 表格
Tr – 行
Td – 单元格 – 列
基本语法：
<table>
caption -- 表格的标题 居中显示
<thead> -- 表头
Tr
Th/th -- 表格头，内容居中显示，加粗显示
/tr
</thead>
<tbody> -- 表格的主体
Tr
Td/td -- 表体 -- 默认靠左显示 不加粗
/tr
<tbody>
<tfoot> -- 脚注
Tr
Td/td -- 表体 -- 默认靠左显示 不加粗
/tr
</tfoot>
</table>
例如：
创建一个两行三列的表格，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table><!-- 表格 -->
<tr><!-- 行 -->
<td></td><!-- 列 -->
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
带结构表格
– 表格划分三个部分
- thead – 表格的头（放表格的表头）
- tbody – 表格的主体（放数据的本体）
- tfoot – 表格的脚（放表格的脚注）
- 以上三个标签不会影响我们的表格的布局
table表格的属性：
Width px / % 规定表格的宽度
Align left center right 表格相对周围元素的对齐方式
Border px 规定表格边框的宽度
Bgcolor rgb(x,x,x) #xxxxxx colorname 表格的背景颜色
Cellpadding px /% 单元边沿和内容之间的空白
Cellspacing px /% 单元格之间的空白
Frame 属性值 规定外侧边框的哪个部分是可见的
rules 属性值 规定内测边框的哪个部分是可见的
tr标签的属性设置:
align left center right justify char 行内容的水平对齐方式
valign top middle bottom baseline 行内容的垂直对齐方式
bgcolor rgb(x,x,x) #xxxxxx colorname 行的背景颜色
frame外部边框样式
1、void 不显示外侧边框
2、above 显示上部外侧边框
3、below 显示下部的外侧边框
4、hsides 显示上下部
5、vsides 显示左右
6、lhs 显示左边
7、rhs 显示右边
8、box 显示所有四个边
9、border 显示四个边
rules表格的内侧边框
1、none 没有线条
2、groups 位于行组与列组之间的线条
3、rows 位于行之间的线条
4、cols 位于列之间的线条
5、all 位于行和列之间的线条
HTML表单
<form action=""></form>
表单控件的常用属性：
name 指定控件的名称，可重复 – 给后台获取数据使用
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置） – 用于传递到后台使用的
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中的项目
src 图片框的图片来源
onclick 鼠标的单击事件 – JavaScript脚本的事件
disabled 禁用该控件
multiple 允许多选（适用于普通列表框）
action 传递到后台的，收集数据传递到后台进行响应 – 相对路径，绝对路径地址或者文件
method
1、post 表示隐式的提交，对安全信息保护的比较好
2、get 表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上
label
1、此标签可以放置纯文本，专门用于显示文字使用的，和不加此标签效果一样；
2、后期可以对此文本进行css样式的设置
radio-单选
1、name是一样的话会被认为是一组单选框，意味着只能选中一个
2、name值不一样，表示他们不是一组，可以同时选中
<input type="radio" name="xb" id="">男
<input type="radio" name="xb" id="">女
checkbox-复选
<input type="checkbox" name="ah" id="">看书
<input type="checkbox" name="ah" id="">旅游
<input type="checkbox" name="ah" id="">思考
<input type="checkbox" name="ah" id="">爬山
select-选择
option：
option元素定义下拉列表中的一个选项，浏览器将标签中的内容作为标签的菜单或者滚动列表中的一个元素显示。
optgroup：
<optgroup>标签对元素所提供的选项进行分组
<label>城市：</label>
<select name="city">
<option>--请选择--</option>
<optgroup label="华北">
<option>北京</option>
<option>天津</option>
<option>河北</option>
</optgroup>
<optgroup label="华东">
<option>上海</option>
<option>福建>/option>
<option>厦门</option>
</optgroup>
</select>
按钮
<input type="button" value="普通按钮" name="">
<input type="submit" value="提交按钮" name="">
<input type="reset" value="重置按钮" name="">
<input type="image" name="" src="">
1、button普通按钮回和后面的JavaScript联动使用
2、submit具有提交功能
3、reset具有重置空能
4、image（图片按钮）也具有提交功能
textarea
多行文本框-- 用于论坛发帖，长文档的输入
<textarea rows="5" cols="30" placeholder="请输入"></textarea>
上传控件
file–选择文件和后台脚本联动上传
<input type="file">
普通列表框
<select name="" id="" size="5" multiple="true"><!-- multiple-允许多选 -->
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">f</option>
</select>
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
