E001Web学习笔记-HTML
E001Web学习笔记-HTML
一、HTML概述
1、简介
超文本标记语言，是最基本的网页开发语言；
标记语言不是编程语言，没有什么逻辑性；
2、概述
①html文档后缀名：.html或者.htm；
②标签分为：
围堵标签：有开始标签和结束标签，例如<html></html>；
自闭标签：开始标签与结束标签在一起，例如<br/>；
③标签可以嵌套；
④在开始标签中定义属性，属性由键值对构成，但需要用引号（单双引号都可以）引起来；
⑤html标签字母不区分大小写，但是建议使用小写；
3、元素和属性
一个HTML标签称为一个元素，一个元素内部可以设置例如id，title等信息，这些信息称为属性；
属性值一般用双引号引起，若属性值内部有双引号，则用单引号引起；
4、基本代码框架
<!-- html文档声明 -->
<!DOCTYPE html>
<!-- 根布局标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 指定字节编码 -->
<meta charset="utf-8">
<!-- 标题 -->
<title>这是标题</title>
</head>
<!-- 网页的主体 -->
<body>
</body>
</html>二、HTML标签
1、文件标签
<!DOCTYPE html>：
文档标记；
html：
html文档的根标签；
head：
头标签，用于指定html文档的一些属性，引入外部资源；
title：
标题标签；
body：
主体标签；
2、文本标签
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
<!-- HTML标题H1_H6 -->
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<!-- HTML段落和水平线：颜色、宽度、高度、对齐方式 -->
<p>段落</p>
<hr color="aqua" width="200px" size="5" align="left"/>
<p>段落</p>
<!-- HTML注释 -->
<!-- 这就是注释 -->
<!-- HTML换行 -->
<p>换行前<br/>换行后</p>
<!-- 文本居中+字体加粗 -->
<center><b>加粗</b></center>
<i>斜体</i>
</body>
</html>运行结果：
属性取值说明：
color的三种取值方式：
①英文单词：red、green、blue等；
②rgb(值1,值2,值3)：值的范围是0~255，如rgb(0,0,255)；
③#值1值2值3：值的范围00~FF，如#FF0000；
width的两种取值方式：
①数值：单位默认是px，例如width="20px"；
②百分比：相对于父元素的比例；
3、图片标签
<img src="图片地址" alt="图片说明" width="宽度" height="高度" align="对齐方式"/>图片地址的三种写法：
①本地图片资源：绝对路径，指的是图片在本机上的绝对位置；
②本地图片资源：相对路径，指的是图片相对于本html文件的位置：
写法：./:目录名/文件名（当前目录）或者直接写文件名；目录名/文件名（同级目录）；../:目录名/文件名（上级目录）；
③网络图片资源：写入图片资源的网址；
4、列表标签
代码：
<!-- 有序列表 -->
<ol>
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>大姐</li>
<li>二姐</li>
<li>三姐</li>
<li>四姐</li>
</ul>运行结果：
5、链接标签
代码：
<!-- 超链接标签 -->
<a href="连接地址">连接文字</a>运行结果：
说明：
地址可以是网络地址、相对文件路径、或者绝对文件路径；类似图片；
6、块标签（跟CSS结合）
代码：
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>备注：
div独占一行；span的文本信息在一行内展示；
7、语义化标签
代码：
<header>
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>
</header>
<footer>
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>
</footer>备注：
语义化标签也是主要结合CSS使用，语义化标签是为了提高代码的可读性，提供的一些标签；
8、表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body>
<!-- 表格根标签 -->
<!-- 一般表格的样式也是由CSS控制的 -->
<table border="1" width="50%">
<caption>表格的标题</caption>
<!-- 定义表格头的部分，方便CSS控制 -->
<thead>
<!-- 行标签 -->
<tr>
<!-- 列标签 -->
<th>1哥</th>
<th>2哥</th>
<th>3哥</th>
<th>4哥</th>
</tr>
</thead>
<!-- 定义表格体的部分，方便CSS控制 -->
<tbody>
<tr>
<!-- 合并单元格 -->
<td rowspan="2">1姐</td>
<td>2姐</td>
<td>3姐</td>
<td>4姐</td>
</tr>
<tr>
<!-- 合并单元格 -->
<td colspan="2">2姐</td>
<td>4姐</td>
</tr>
</tbody>
<!-- 定义表格脚的部分，方便CSS控制 -->
<tfoot>
<tr>
<td>1姐</td>
<td>2姐</td>
<td>3姐</td>
<td>4姐</td>
</tr>
</tfoot>
</table>
</body>
</html>三、表单标签
1、概述
form：
用于定义表单，它的范围代表了采集用户数据的范围；
属性简介：
action：
指定提交数据的URL；
method：
指定提交方式：get、post（一共七种，常用两种）；
get：
①请求参数会在地址栏中显示，会封装在请求行中，显示在浏览器地址栏；
②请求参数的长度有限制；
③不太安全；
post：
①请求参数不会在地址栏中显示，会封装在请求体中；
②请求参数的长度没有限制；
③较为安全；
注意：
表单项中的数据要想被提交就必须指定name属性；
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
用户名：<input name="username" /><br />
密码：<input name="password" /><br />
<input type="submit" name="login" id="login" value="登录" />
</form>
</body>
</html>运行结果：
2、表单项input
可通过不同的type取值改变元素展示的样式；
text
文本输入框（默认）；
password
密码输入框；
radio
单选框
注意：
①要想使多个单选框实现单选的效果，则必须设置相同的name值；
②一般会给每一个单选框一个value值，指定其被选中后提交的值；
③checked属性，用来指定默认值；
checkbox
复选框
注意：
①一般会给每一个单选框提供value属性，指定被选中后提交的值；
②checked属性，用来指定默认值；
file
文件选择框
hidden
隐藏域，用于提交一些信息；
按钮
submit提交按钮；
button普通按钮；
image图片按钮；
label
指定输入项的文字描述信息；
注意：
label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点；
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
账号：<input name="username" /><br />
密码：<input name="password" /><br />
头像：<input type="file" name="file" /><br />
隐藏域：<input type="hidden" /><br />
职业（单选）：<br />
学生<input type="radio" name="radio" value="学生"/>
教师<input type="radio" name="radio" value="教师"/>
校长<input type="radio" name="radio" value="校长"/><br />
爱好（多选）：<br />
运动<input type="checkbox" name="radio" value="运动"/>
读书<input type="checkbox" name="radio" value="读书"/>
Java<input type="checkbox" name="radio" value="Java"/><br />
<input type="submit" name="login" id="login" value="提交" />
<input type="button" name="login" id="common" value="普通按钮" />
<input type="image" name="login" id="image" value="图片按钮" />
</form>
</body>
</html>运行结果：
3、表单项select
下拉列表
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<select>
<option value ="0">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">杭州</option>
</select>
</body>
</html>运行结果：
4、表单项textarea
文本域
cols指定列数，rows指定行数；
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本域</title>
</head>
<body>
<textarea cols="20" rows="20">
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
这是文本域啊！这是文本域啊！这是文本域啊！
</textarea>
</body>
</html>运行结果：
腾讯云开发者
