什么是HTML
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2.HTML 不是一种编程语言,而是一种标记语言 (markup language)
3.标记语言是一套标记标签 (markup tag)
4.HTML 使用标记标签来描述网页
5.HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <p>
和 </p>
标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签.
HTML常用的标签
标签 | 作用 |
---|---|
<h1>-<h6> | 1-6表示的网页或者文章的标题字体的大小从大到小,默认加粗 |
<hr/> | <hr/> 是一个单标签作用是换行 |
<b> | 给文字加粗 |
<b> | 给文字加粗 |
<div> | 区域划分 |
<div> | 区域划分 |
<hr/> | <hr/> 是一个单标签作用是在HTML 页面中创建一条水平线 |
<p> | 定义段落 |
form表单的应用
常用属性如下:
属性 | 值 | 描述 |
---|---|---|
name | form_name | 规定表单的名称 |
method | get 和 post | 规定用于发送 form-data 的 HTTP 方法。 |
action | URL | 规定表定当提交表单时向何处发送表单数据。的名称 |
-
form表单下的get请求和post请求有什么区别?
post请求提交时路径上没有属性的信息 相对安全 get 请求提交时路径的地址上存在属性的信息 不安全 因为get请求在路径的地址上存在属性值url的地址是有限制的最大为64kb
-
什么时候用get请求 什么时候使用post请求?
根据数据的性质------对于安全度不重要的数据使用post和get都可以,如果数据的性质比较高时那么一定要使用post 在写文件上传的功能是 请求必须是post的提交方式
form表单下<input>
常用的属性:
属性 | 值 | 描述 |
---|---|---|
value | value | 规定 input 元素的值。 |
name | field_name | 定义 input 元素的名称。 |
type | text | 文本框 |
type | password | 密码框 |
type | checkbox | 多选框 |
type | radio | 单选框 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | file | 文件上传 |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>读读书城</h1>
<hr>
<form action="https://www.w3school.com.cn/html/index.asp" method="get">
<p>请输入您的用户名:<input type="text" name="username"/></p>
<p>请输入您的密 码:<input type="password" name="pwd"/></p>
<p>请输入您的性别:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
请选择你的爱好:
<input type="checkbox" name="hobby" value="吃饭"/>吃饭
<input type="checkbox" name="hobby" value="睡觉"/>睡觉
<input type="checkbox" name="hobby" value="懒虫"/>懒虫
<input type="checkbox" name="hobby" value="听歌"/>听歌
</p>
<p>
请选择你的城市:
<select name="city">
<option>---请选择城市---</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>广州</option>
</select>
</p>
<p>
请选择书的类型:
<select name="style" multiple="multiple">
<option>---请选择类型---</option>
<option>都市言情</option>
<option>奇幻冒险</option>
<option>穿越古装</option>
<option>人文历史</option>
</select>
</p>
<p>
<textarea rows="3" cols="30">这个人很懒,什么都没有留下</textarea>
</p>
<p>
<input type="submit" name="" value="提交"/>
<input type="reset" name="" value="重置"/>
<input type="button" name="" value="button">
</p>
</form>
</body>
</html>
效果如下:
a标签锚点如何使用
常用属性如下:
属性 | 值 | 描述 |
---|---|---|
href | URL | 规定链接指向的页面的 URL |
name | section_name | 规定锚的名称 |
target | _blank | 在新的页面打开链接 |
锚点实例(我这中间没有写文字,这个实例要多些点文字才看得出来你们可以复制一些文字来试验一下):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body vlink="gold" link="pink" alink="green">
<h1><a name="R4" />QQ空间</h1>
<hr>
<p><a href="#R1">第一章</a></p>
<p><a href="#R2">第二章</a></p>
<p><a href="#R3">第三章</a></p>
<h2><a name="R1" />第一章</h2>
文字
<h2><a name="R2" />第二章</h2>
文字
<h2><a name="R3" />第三章</h2>
文字
<p><a href="#R4">回到顶部</a></p>
</div>
</body>
</html>
有序与无序列表
ul的type属性有2个值:square(设置项目符号为正方形) ,circle(设置项目符号为圆形)
ol的start属性用于设置有序列表的起始值,type属性有五个值分别为:1 A a I i
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>有序列表:</p>
<ol type="i">
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表:</p>
<ul type="square">
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
</body>
</html>