Web前端学习笔记
第一章 HTML常用标签
前言
Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。
一、HTML是什么？
- 作用： 负责搭建页面结构和内容 （盖房子 房）
- HyperTextMarkupLanguage： 超文本标记语言
- 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
- 标记语言：
- <开始标签 属性=“xxx”>标签体</结束标签>
二、常见标签
1.文本标签
- 内容标题：h1-h6
特点： 独占一行， 字体加粗， 自带上下间距
- 水平分割线：hr
- 段落标签：p
特点： 独占一行 自带上下间距
- 换行： br
- 加粗：b
- 斜体：i
- 下划线：u
- 删除线：s
2.列表标签
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
3.图片标签img
- src：资源路径
- 相对路径：访问站内资源使用
- 图片和页面在同级目录： 直接写图片名
- 图片在页面的上级目录：
../图片名
- 图片在页面的下级目录： 文件夹名/图片名
- 绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
- alt： 当图片不能正常显示时显示的文本
- title: 鼠标在图片上悬停时显示的文本
- width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
4.超链接a
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="top" href="https://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a><br>
<a href="http://www.tmooc.cn"><img src="a.jpg" width="100"></a><br>
<img src="a.jpg"><br>
<img src="a.jpg"><br>
<a href="#top">回到顶部</a>
</body>
</html>
5.表格标签table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="">
<caption>购物车</caption>
<tr>
<th>编号</th>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>1</td>
<td>华为Mate 40 pro</td>
<td>6799</td>
</tr>
<tr>
<td>2</td>
<td>华为Mate 50 pro</td>
<td>6799</td>
</tr>
<tr>
<td>3</td>
<td>华为MatePad pro</td>
<td>4999</td>
</tr>
<tr>
<td>总价:</td>
<td colspan="2">18,597元</td>
</tr>
</table>
</body>
</html>
6.表单form
- 作用: 获取用户输入的各种信息并且把这些信息提交给服务器
- 需要学习form表单中的各种控件, 包括: 文本框,密码框,单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- action:提交路径
maxlength:最大字符长度
value:设置默认值
readonly只读 -->
<form action="https://www.baidu.com">
用户名:<input type="text" name="username" maxlength="5" value="abc" readonly>
密码:<input type="password" name="password"></input><br>
<!-- value是单选框必须添加的属性,否则提交on
checked默认选中 -->
性别:<input type="radio" name="gender" checked value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" value="w">女
<br>
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" checked value="hj">喝酒
<input type="checkbox" name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
所在地:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sjz" selected>石家庄</option>
</select><br>
<input type="submit" value="注册">
</form>
</body>
</html>
7.分区标签
-
作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
-
块级分区标签div: 特点是独占一行
-
行内分区标签span: 特点是共占一行
-
页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
-
HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
- header头
- footer脚
- main主体
- section区域
- nav 导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>块级分区标签1</div><div>块级分区标签2</div><div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>
<div>头</div>
<div>体</div>
<div>脚</div>
</body>
</html>
总结
本文介绍了比较常用的html标签及分区的概念。
