HTML常用标签
div块标签
div标签表示一个区块或者区域,可以把它看成一种容器,用来把网页分块并且可以将任意HTML元素置于其中,基本形式如下
<div>Python Web</div>
Python Web
span段落标签
span标签可以表示一个小区块,比如一些文字。span和div不同在于多个span标签能够在一行内显示而每个div是独占一行的,基本形式如下
<span>Python Web</span>
Python Web
h1至h6标题标签
h1至h6这6个标签表示6级标题,表现出来的效果就是从h1开始文字大小逐渐变小,基本形式如下
<h1>
Python Web
</h1>
<h2>
Python Web
</h2>
Python Web
Python Web
p段落标签
p标签是段落标签,通常用来表示一整段文字,在开发博客、新闻等文章型内容经常会使用该标签,基本形式如下
<p>
Python Web网站开发、Django项目开发
</p>
Python Web网站开发、Django项目开发
ul和li列表标签
ul为无序列表标签,而li为ul中的每个列表项目。这两个标签非常实用,网站制作中的导航栏、新闻列表等都可以用这两个标签来实现,基本形式如下
<ul>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
- 这是第一条
- 这是第二条
- 这是第三条
i、em、strong、hr、和br格式标签
i和em标签表示斜体,strong标签表示加粗,hr标签表示一条水平分隔线,br标签表示换行,基本形式如下
<i>Python Web网站开发</i>
<em>Python Web网站开发</em>
<strong>Python Web网站开发</strong>
<hr>
<p>
Python Web<br>网站开发
</p>
Python Web网站开发
Python Web网站开发
Python Web网站开发
Python Web
网站开发
img图像标签
img标签表示图像,可以通过该标签引入图片,基本形式如下
<img scr = '1.jpg' alt = '图片1' title = '测试图片'>
其中,该标签的src属性指向图片的所在路径,此路径可以是网络路径也可以是本地路径。如果是本地路径,就要区分是相对路径还是绝对路径。在img标签中还经常会使用两个属性:alt和title。alt表示当前图片还没有正确加载时显示的文字,title表示当前光标移动道图片时显示的文字。
a超链接标签
a标签表示超链接,一般用于指向某个网址,基本形式如下
<a href = 'https://www.google.com'>谷歌</a>
HTML表单
在HTML中有一种特殊的元素:表单(form),其作用是用来收集用户的信息并且发送给后台使用。HTML中的表单在很多场景中都会用到,比如Web的登录、注册等功能一般都是通过表单实现的。表单中即成了一些表单子元素,例如搜索框、按钮、下拉列表框等。
用户在这些子元素中输入的信息会以表单的形式发送给后台处理,而一般的后台框架都具有表单的验证功能,可以方便的对表单进行验证。表单的基本形式如下
<form action = 'https://www.google.com' method = 'get'>
用户名:<input type = 'text' name = 'user' />
密码:<input type = 'password' name = 'password' />
< input type = 'submit' value = '提交' />
</form>
上述HTML代码通过标签<form>
表明当前是表单元素,其中,action属性用来设置表单提交到的服务器网址。表单提交的方式一般有两种:get和post。两种提交方式的区别在于get方式提交的数据会直接显示在网址上,不安全;而post方式不会显示在网址上面,数据相对较为安全。上述代码在表单内部定义了三个input子元素:两个文本输入框和一个提交按钮,可以让用户输入用户名和密码等信息并提交给后台服务器。下面列举一些常见的表单元素
input文本输入标签
<input>
输入标签用于接受用户输入的信息,其中的type属性指定输入标签的类型。
常见的类型如下
类型 | 说明 |
文本框 | 输入的文本信息直显示在框中 |
密码框 | 输入的文本以原点或星号的形式显示 |
单选按钮 | 单选按钮,如性别选择 |
复选框 | 复选框,如兴趣选择 |
隐藏字段 | 在页面上不显示,但提交的时候随其他内容一起提交 |
提交按钮 | 用于提交表单中的内容 |
重置按钮 | 将表单中填写的内容设置为初始值 |
文件上传 | 后期扩展内容,会自动生成一个文本框和一个‘浏览’按钮 |
select选择标签
select选择标签,提供用户选择内容,如用户所在的省市等
textarea多行文本标签
多行文本框,如个人信息描述等
label静态文字标签
用于给个元素定义说明