HTML
快速入门
- 基本语法规则:
- html文档后缀名:
.html
或者.htm
- 标签分为:
- 围堵标签:有开始和结束的标签 如
<html> </html>
- 自闭和标签:开始和结束标签在一起,如:
<br/>
- 围堵标签:有开始和结束的标签 如
- 标签可以嵌套,但需要正确嵌套,同括号配对
- 在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单双都可)引起来
- html的标签不区分大小写, 但是建议使用小写
- html文档后缀名:
标签
-
文件标签:构成html最基本的标签
-
html:html文档的根标签
-
head:头标签,用于指定html文档的一些属性,引入外部的资源。
-
title:标题标签
-
body:体标签
-
< !DOCTYPE html> : HTML5中定义该文档是html文档
</!doctype>
-
-
文本标签:和文本有关的标签
-
注释:
<!-- 注释 -->
-
<h1> - <h6>
: 标题标签 -
<p>
:段落标签 -
<a>
: 超链接标签-
功能
-
可以被点击,产生一定样式
-
点击后跳转到
href
指定路径-
保留1功能,删除2功能
<a href="javascript:void(0);" id="del"> 点击删除 </a>
-
-
-
-
<br>
: 换行标签 -
<hr>
:展示一条水平线属性:- color 颜色
- width 宽度
size 高度align 对齐方式- center 居中
- left 左对齐
- right 右对齐
-
<b>
: 加粗 -
<i>
: 斜体<font>
: 字体标签- 属性:
- color 颜色
- size 大小
- face 字体
- 属性:
-
属性:
-
color :
- 英文单词: red green blue
- rgb(x, y, z) 0~255
- #xyz 00~FF
-
width:
-
数值: width = ‘20’,单位 px (像素)
-
数值%: 占比相对于父元素的比例
-
-
-
-
列表标签:有序列表:<ol type = "", start = "">
: 样式,从 xxx 开始<li>
每项列表内容</li>
无需列表:<ul>
-
超链接:
<!-- 在本页面打开网址, 默认值 --> <a href = "链接网址", target = "_self"> Text </a> <!-- 在空白页打开网址 --> <a href = "链接网址", target = "_blank"> Text </a>
-
块标签
<div>
: 每个div占满一整行,块级标签span
:文本信息在一行展示,行内标签,没有任何特殊效果
-
语义化标签:html5中为了提高程序可读性,提供的一些标签。
<header>
<footer>
-
表格标签
-
caption: 表格标题
-
table : 定义表格
- width: 宽度
- border: 边框
- cellpadding: 单元格内容与边框的距离
- cellspacing: 单元格边框线之间的距离
- bgcolor: 表格背景色
-
tr:定义行
-
td: 定义单元格
- colspan: 合并列
- rowspan: 合并行
-
th:定义表头单元格
- : 语义化标签
<table border="1" width="50%" cellspacing="0"> <tr> <th>编号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>1</td> <td>zjz</td> <td>100</td> </tr> <tr> <td>2</td> </tr> </table>
-
语义化标签
为了提高程序可读性,提供的一些标签
<header></header>
<footer></footer>
表单标签
- 用于采集用户输入数据,用于和服务器交互
- 标签:
form
- 用于定义表单,可以定义一个范围,代表采集用户数据的范围
属性
- action: 指定提交数据的 URL
- method: 提交方式
- 分类,一共7种,下两种比较常用
- get:
- 请求参数会在地址栏中显示
- 请求参数与大小有限
- 不太安全(会被直接看到)
- post:
- 请求参数不会在地址栏中显示,会封装在请求体中(见HTTP协议)
- 请求参数大小没有限制
- 比较安全
- get:
- 分类,一共7种,下两种比较常用
表单项中的数据要想被提交,必须指定其name属性
表单项标签
- input: 可以通过 type 属性值,改变样式
- lable:指定输入项的文字描述信息
- label 的 for 属性, 一般会和 input 的 id 属性值一样,若对应,则点击 lable 区域,会在 input 输入框中获取焦点
- type 属性
- text: 文本输入框,默认值
- placeholder: 输入框提示信息,
- password : 密码输入框
- radio: 单选框
- 注意:
- 要想让多个单选框实现单选效果,其
name
属性必须一样 - 一般会给每个单选框提供 value 属性,指定其选中后提交的值
- 用checked 默认选中
- 要想让多个单选框实现单选效果,其
- 注意:
- checkbox: 复选框
- 和单选框使用方式类似
- file: 文件选择框
- hidden: 隐藏域,不会显示到界面上,但是 value 值会被提交,用于提交一些隐藏信息
- submit : 提交按钮
- button: 一个按钮
- image:用图片做一个按钮,这个按钮可以提交表单
- src: 指定图片路径
- email: 邮箱,会校验提交信息是否包含 @
- date: 日期, 年-月-日
- datetime-local:年-月-日 时:分:秒
- number: 只允许输入数字
- text: 文本输入框,默认值
- lable:指定输入项的文字描述信息
- select: 下拉列表
- option:列表项
- textarea:
- rows: 指定初始行数
- cols: 指定初始列数
更多字符见参考手册