HTML笔记
一、概念
- Hyper Text Markup Language 超文本标记语言 -- 最基础的网页开发语言
- 超文本:是用超链接的方法,将个各种不同空间的文字信息组织在一起的网状文本
- 标记语言:由标签构成的语言 <标签名> 如HTML,XML【标记语言不是编程语言,没有逻辑性。写上就会执行】
二、快速入门
语法:
- 文档后缀名:html / htm
- 标签分类
- 围堵标签:有开始标签与结束标签 如 把子标签堵在里面
- 自闭合标签:开始标签与结束标签在一起 如
换行标签
- 标签可以嵌套格式:<aa><bb>
- 注意!!需要正确嵌套,不能“你中有我,我中有你”
- 在开始标签中可以定义属性,属性由键值对组成,值需要用引号(单双均可)括起来
- HTML的标签不区分大小写,但是建议小写
实例:
代码
<html> <head> <title>我是标题</title> </head> <body> <font color = 'red'>Hello HTML</font></br> <font color = 'green'>Hello HTML</font> </body> </html>
效果
三、标签
分类
- 文件类标签
- 文本类标签
- 图片类标签
- 列表类标签
- 链接类标签
- 表格类标签
文件标签:构成HTML最基本的标签
<html>
:HTML文档的根标签<head>
:头标签。用于指定HTML文档的一些属性。引入外部的资源<title>
:标题标签。定义标题<body>
:体标签。<!DOCTYPE>
:HTML5中定义该文档是HTML文档
文本标签:与文本有关的标签
注释:
<!--注释内容-->
<h1> to <h6>
:标题标签- h1~h6 字号逐渐递减
<p>
:段落标签<br>
:换行 写法<br/>
或者<br>
都可以 自闭合标签<hr>
:展示一条水平线- 属性
color
:颜色 - 属性
weidth
:宽度 - 属性
size
:高度 - 属性
align
:对齐方式【center居中 left左对齐 right右对齐】
- 属性
<b>
:字体加粗<i>
:字体斜体<font>
:字体标签【已淘汰】- 属性
color
:颜色 - 属性
size
:字号 - 属性
face
:字体 -- PC支持这种字体才会正确显示
- 属性
<center>
:文本居中标签【已淘汰】属性定义的方式
color
:- 英文单词:red、green、blue
- rgb(值1, 值2, 值3):三原色【红绿蓝】占比情况 值范围为[0~255] 如rgb(0, 0, 255)
- 值1值2值3:效果同上 值范围00~FF【十六进制】 如
#FF00FF
width
:- 数值形式:
width='20'
,数值单位默认为px【像素】 数值%
:相对于父元素的比例
- 数值形式:
特殊符号表
图片标签
<img>
标签- 属性src:指定图片位置
./image/img111.jpg
相对路径。image目录是本文档同级目录,img111.jpg是image目录下的图片..//image/img112.jpg
相对路径。image目录是本文档上一级目录同级目录,img112.jpg是image下的图片
- 属性src:指定图片位置
列表标签
有序列表
ol
:<!--tye属性可以修改序号样式 start属性可以定义开始的序号 start="5" 从第五个开始--> <ol type="a" start="5"> <li>朝辞白帝彩云间</li> <li>千里江陵一日还</li> <li>两岸猿声啼不住</li> <li>轻舟已过万重山</li> </ol>
li
无序列表
ul
<!--无序列表--> <!--可以通过type属性定义无序列表项的标识符号 [disc / square / circle]--> 早发白帝城<br> <ul type="square"> <li>朝辞白帝彩云间</li> <li>千里江陵一日还</li> <li>两岸猿声啼不住</li> <li>轻舟已过万重山</li> </ul>
li
链接标签
<a>
标签用来定义一个超链接- 属性
href
:定义超链接跳转的资源URL【href="https://www.baidu.com/"
】 - 属性
target
:指定打开资源的方式_self
:在本页面打开 【默认值】_blank
:打开一个新的页面,在新页面打开资源
- 属性
块标签
div
标签:每一个div占满一整行。 会换行 块级标签span
标签:文本信息在一行展示,行内标签 内联标签
语义化标签 -- h5中为了提高程序的可读性,提供了一些标签
<header>
:h5中把HTML头标签内容放在<header>
里面,表示这是头部内容,提高了程序的可读性【之前使用<div id = "hreader">
定义】<footer>
:h5中把HTML文档末尾的内容放在<footer>
里面,表示这是尾部内容【之前使用<div id = "footer">
定义】
表格标签
<table>
:定义表格width
属性:宽度border
属性:定义一个边框cellpadding
:定义内容与单元边沿之间的距离cellspacing
:定义单元格之间的距离,如果与上一条都指定为0 ,则单元格之间的线会合并为一条bgcolor
:指定整个表格背景颜色align
:指定表格在文档中的位置
<tr>
:定义单元格行align
:一行表格的内容在单元格中的对齐方式bgcolor
:指定一行背景颜色
<td>
:定义单元格 列rowspan
:合并行单元格,合并后此行占几行则属性值为几colspan
:合并列单元格,合并后此列占几格则属性值就为几- 如此例中第一行三个单元格,第二行两个单元格【第一行的哪个占了两行】,第三行两个单元格
align
:一列表格的内容在单元格中的对齐方式bgcolor
:指定一列的那日荣黄背景颜色
<th>
:定义表头单元格【自动加粗/居中对齐】<caption>
:定义表格的标题<thead>
:表示表格的头部分【增强可读性,在CSS中再控制】<tbody>
:表示表格的体部分<tfoot>
:表示表格的尾部分
HTML表单标签
表单:
概念:用于采集用户输入的数据的。用于与服务器进行交互的
标签:
<form>
-- 用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围属性
action
:指定提交数据的URL【即提交到哪个页面】属性
method
:指定提交方式分类:一共分为7中。其中有两种比较常用
POST
:- 请求参数不会在地址栏中显示,会封装在请求体中【HTTP协议】
- 请求参数的长度没有限制的
- 较为安全
GET
:- 请求参数会在地址栏中显示,会封装在请求行中
- 请求参数的长度是有限制的
- 不太安全【参见第一条 =.= 】
表单项中的数据要想被提交,必须指定其
name
属性
表单项标签【输入的数据的形式】
1.
<input>
:可以通过type属性值,改变元素展示的样式属性
type
:text
取值:文本输入框【默认】placeholder
:指定输入框的提示信息,当输入框内容发生变化,会自动清空提示信息
password
取值:密码输入框placeholder
属性可以用灰色字体显示提示信息输入即消失
【value属性效果相似,但输入不消失】
适用于type = "text"/"password"
radio
取值:单选框checkbox
取值: 复选框注意!!
- 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
- 一般会让每一个单选框提供value属性,指定其被选中后提交的值【比如gender的value属性未指定,则提交时提交的是on,但不知道提交的是啥值】
- checked 属性可以指定默认值 书写方式为 checked="checked"或者直接写checked
- 复选框同上
file
取值:可以选取本地的文件hidden
:取值:隐藏域。可以隐藏某些值,可以提交信息button
取值:type取值button时,是一个普通的按钮image
取值:type取值image时,是一个图片提交按钮,可以通过src属性设置图片路径h5中new的取值
color
取值:取色器,提交时可以提交这个颜色date
取值:时间取值,包含年月日datetime-local
取值:包含年月日时分email
取值:输入邮箱,会对输入的信息做一个简单的校验【必须包含@符号】number
取值:只能输入数
label
标签:label标签的for属性一把会和 input 的id 属性对应 如果对应了则点击label区域,会让input输入框获取焦点【`<label for = "username"> 用户名</label> <input type = "text” id = “username”>` 】
2.
<select>
标签:下拉列表- 子元素:option,指定列表项
- 注意:为了使select标签可以提交,其name属性必须指定值有的浏览器不支持中文,可以在value属性值中写1 2 3...代表选择
3.
<textarea>
标签:文本域,很多行文本- 属性cols:指定列数,每一行有多少字符
- 属性rows:默认多少行
- 同样要指定name属性