HTML学习笔记
记录一下CSS学习笔记。
概念
- HTML hyper text markup language 超文本标记语言
- 超文本
- 超文本使用链接的方式,将不同的文字信息连接在一起
- 标记语言
- 不是编程语言
- 超文本
快速入门
语法
1、html文档
.html
或者htm
1
2
3
4
5
6
7
8
9
10
11<html>
<head>
<title>
Title
</title>
</head>
<bady>
<font color="red"> HELLO WORLD!</font>
</bady>
</html>2 标签分类
- 围堵标签:有开始标签和结束标签
- 自闭合标签: 开始标签和结束标签在一起
3 标签可以嵌套
4 可以在开始标签中定义属性,属性由键值对构成,值需要用引号包括起来(单引号和双引号都可以)
5 HTML标签不区分大小写,但是建议小写
标签学习
1、文件标签
- html:标识HTML文档的根标签
- head:头标签。用于指定HTML的一些属性,可以引入外部资源
- title:定义标题的标签
- body:体标签
2、文本标签
1
2
3
4
5
6
7
8
9
10注释<!--注释-->
<h1> to <h6>:标题标签
<p></p>:段落标签
<br>换行,自闭合
<hr>:水平线,自闭合 与Markdown一致
<b>字体加粗</b>
<i>斜体标签</i>
<!-- 相对路径 以“./目录” 表示当前目录-->
<!-- 以“../” 表示上一级目录-->
3、图片标签
<img src="路径">
与Markdown语法一致
4、列表标签
有序列表 order list
<ol>
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> </ol>
1
2
3
4
5
6
7
8
9
10
11
12
- 无序列表unorder list ``<ul>``
```html
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
5、链接标签
<a href="https://www.baidu.com">点我</a>
<a href="https://www.baidu.com" target="_self">点我</a> <!-- 默认 --> <a href="https://www.baidu.com" target="_blank">点我</a>1
2
3
4
- <a herf="https://www.baidu.com">点我</a> <!--与Markdown一致-->
-<a href="mailto:1679190840@qq.com">测试邮件</a>1
2
-<!--a标签嵌套图片--> <a href="https://www.baidu.com"><img src="D:\图片\爱壁纸UWP\视觉\视觉 - 1.jpg" height="100" width="100"/></a>1
2
-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
- **6、表格标签**
- table:定义表格
- tr:定义行
- td:定义单元格
- th:定义表头单元格
- ```html
<table border="1" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>1</td>
<td>test1</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>test3</td>
<td>77</td>
</tr>
</table>width :宽度
boder:边框
cellpadding :内容与单元格空隙
cellspacing:单元格间的空隙
bgcolor:背景颜色
align:对齐方式
caption:表格信息
thead:表示表头
tbody:表示表体
tfoot:表示表尾
rospan:占两行
cospan:占两列
7、语义标签
<header></header> <footer></footer>
1
2
3
4
5
6
7
8
9
-
- **8、div和span标签**
- ```html
<span>测试Span</span><!-- 起包裹作用,没有任何效果,和CSS结合,默认一行 ,行级标签-->
<div>测试div</div><!-- 同样没有任何样式,占满一行,块级标签 -->
9、表单标签
- 用于采集用户输入数据
- 实用的标签
form
1 | <html> |
属性:action:指定提交数据的URL
属性: method:指定提交的方式
GET 会在地址栏中显示
GET 从指定的资源请求数据
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST 不会再地址栏中显示,会分装在请求体中
POST 向指定的资源提交要被处理的数据
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
表单数据要被提交必须指定name属性
input标签
- 可以通过
type
属性改变样式- text :placeholder=”请输入用户名” 提示信息
- password
- radio:单选框 ,多个单选框要想实现单选
name
值必须一致,需要给每个单选框设置value设置值 - checkbox:复选框
checked="checked"
默认选中 <lable>
标签for属性和id属性绑定,有点击效果- file:文件选择框
- hidden:隐藏的数据
- button:一个按钮,
- image:图片提交按钮
- data:日期
- email:会做正则校验
- 可以通过
select标签:下拉标签 注意必须设置name属性才能被提交
- 子元素:
<option></option>
- 子元素:
testarea标签:文本域
- cols:指定列数,每一行多少字符
- rows:指定行数
实例
1 |
|