因为有需求,我又是想往Python全栈工程师发展,所以今天开始学习一些前端的知识.也顺便把自己的学到的东西总结记录下.如果能把学到的东西清晰明确的表达出来,让别人看懂,我想这才能算学通了.
一.什么是HTML
- HTML是一种用来描述网页的语言,全名:超文本标记语言(HyperText Markup Language)
- HTML不是一种编程语言,而是一种标记语言(HTML是由游览器的内核解析的)
- 标记语言是一套标记标签(markup tag)
- 一个HTML文件包含了HTML标签以及文本内容
- HTML文件也可以叫做web页面
二.HTML是用来做什么的
- HTML用于建立自己的web站点,编写与用户交互的网页
三.HTML的基本结构和语法规范
1. 声明文档: <!DOCTYPE HTML>
2. HTML标签:这是网页中做大的标签,所有内容和设置都要写在此标签中
a.head头:一般用来做编码的设置,标题设置,以及其他页面相关的设置都在此标签中
b.body体:一般写显示在页面中的内容
3. HTML语法和规范
a.标签的组成:<标签名></标签名>,前面的称为开始标签,后面有斜杠的称为闭合标签
b.语法规范:标签必须用小写,且属性的值必须用双引号引起来(用单引号或不用引号都
不会报错但不符合一般规范)四.常用块级标签
1. 标题标签: <h1>---<h6>
2. 段落标签: <p>
3. 列表标签:
a.无序列表(<ul> <li>),注:ul:Unordered List;li:List Item
b.有序列表(<ol> <li>),注:ol:Ordered List;li:List Item
c.自定义标签(<dl> <dt> <dd>),不常用
4. 表格标签:
a.<table> 说明在此标签项内是一个表格
b.<tr> 说明在此标签项内是一个表格的一个行
c.<td> 说明在此标签内是一个表格的一列
5. 无语义块级标签:<div> 一般用于网页的布局,配合css使用
注:有语义是指有默认的样式,无语义就是没有默认的样式
块级标签的特点:独占一行五.常用的行级标签
1. HTML链接标签(超链接标签): <a></a>标签
a.基本格式:<a href="链接地址">显示的链接文本</a>
b.可选属性:target="_blank".表示在新标签中打开
c.注意:链接地址尽可能别用中文,因为可能经过转码后会出现找不到目标文件的情况
2. 图像标签:<img>标签
a.基本格式:<img src="图片地址" alt="用户图片加载失败时的替代文字">
b.可选属性1:title="鼠标悬停在图片上时的提示信息"
可选属性2:width="图片宽度,如:200px"
可选属性3:height="图片高度,如:200px"
c.注意:图片一般只设置宽度或高度,图片会等比例缩放.如果都设置了可能会失真.
src地址可以是网络资源也能是本地资源
3. 文本标签:
a.<b></b>标签,加粗
b.<i></i>标签,斜体
c.<strong></strong>标签,加粗并有强调语义(关系到SEO搜索引擎的优化)
d.<em></em>标签,斜体并有强调语义(关系到SEO搜索引擎的优化)
4. 无语义的行级标签:<span></span>一般也是配合css用来设置某部分文本的样式行级标签特点:不会独占一行
六.常用的实体字符
由于HTML标签都是用<>围起来的,所以有时候想表达大于小于的时候会出问题,可能会影响到页面布局,又有的时候我们想调整文字格式,比如加几个空格(直接在HTML上输入空格是没有效果的,无论输入多少解析出来就是1个空白符),所以产生了实体字符.
1. > 表示大于号 >
2. < 表示小于号 <
3. 其他还有很多这里就不列举了,一般用到去查就好七.表单标签
表单定义:表单是一个包含表单元素的区域.通过form来定义表单区域
表单在网页中用的不多却很重要,和用户的数据交换大多都是使用表单完成的,比如用户的登录,注册,
密码输入和信息检索都是通过表单来获得用户的输入的.
通过type属性定义不同类型的表单控件
- text 普通文本输入框
- password 密码输入框
- radio 单选按钮
- checked 多选按钮
- select 下拉框
- file 文件上传选框
- textarea 文本域
- submit 提交按钮
- reset 重置按钮
- hidden 隐藏域,要和表单一起提交的信息
常用属性:
- name属性: 表单项名,用于存储内容值
- value属性:输入的值
- disabled属性:禁用属性
- readonly属性:只读属性
- checked属性:选择框制定默认选项
- placeholder属性:提示
注意:
form有两个必须存在的属性 action:提交地址 ; method:提交方式
get提交:通过url进行数据传输,数据可见,有大小限制,不安全
post提交:通过request body传输数据,数据不可见,参数没有大小限制,相对比较安全
如果有文件传输:需要在form中添加enctype=”multipart/form-data” 进行数据转码
最后附上一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<p>3>2</p>
<p>1<2</p>
<!--action:数据提交地址 method:提交方式 enctype:如果表单中有文件上传则必须添加这个属性,并设置为"multipart/form-data"-->
<!--提交方式默认是get方式提交,提交特点:通过url地址传输地址,数据会显示在url地址栏当中.传输地址有大小限制,根据游览器的不而不同.相对来说不安全-->
<!--post提交方式特点:数据不通过url地址传输,相对来说比较安全.而且数据传输没有具体的大小限制,一般使用post方式传输数据-->
<form action="" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username" value="" placeholder="请输入用户名"><br>
密码:<input type="password" name="pwd" value="">
<!--一组单选框的name值必须相同-->
性别:<input type="radio" name="sex" value="1">男 <br>
<input type="radio" name="sex" value="0">女
<br>
爱好:<br><!--一组复选框的name值必须相同-->
<input type="checkbox" name="hobby[]" value="1">篮球<br>
<input type="checkbox" name="hobby[]" value="2">足球<br>
<input type="checkbox" name="hobby[]" value="3">羽毛球<br>
学历:<br>
<!--下拉框必须与配合 option-->
<select name="education">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大学</option>
</select><br>
<!--文件上传-->
请选择上传的文件:<input type="file" name="file1"><br>
请输入个人介绍:<br>
<textarea name="textarea" id="">请输入个人信息</textarea><br>
<!--按钮 type="submit"-->
<input type="submit" name="submit" value="确定"><br>
<button>提交</button><br>
<!--重置按钮,将输入状态重置为初始状态-->
<input type="reset" disabled><br>
<!--隐藏域 hidden 不要用户查看以及填写的信息-->
<input type="hidden" name="id" value="0">
</form>
</body>
</html>
8906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
