HTML学习笔记

最新推荐文章于 2023-07-22 15:46:36 发布

野原皮皮虾

最新推荐文章于 2023-07-22 15:46:36 发布

阅读量218

点赞数 4

分类专栏： HTML+CSS 文章标签： html

本文链接：https://blog.csdn.net/qq_34267076/article/details/116120300

版权

HTML+CSS 专栏收录该内容

5 篇文章 6 订阅

订阅专栏

HTML学习笔记

什么是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>请输入您的密&nbsp;&nbsp;&nbsp;码:<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>

在这里插入图片描述

野原皮皮虾

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML学习笔记什么是HTMLHTML常用的标签form表单的应用a标签的应用有序与无序列表select标签的应用framest表单的应用生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants什么是HTML1.HTML 指的是超文本标记语言 (Hyper Text Markup Language)2.HTML 不是一种编程语言，而是一种标记语言 (markup language)3.标记语言是一套标记标签 (markup tag)4.HTML 使用标记标签来描述网页5
复制链接

扫一扫

专栏目录