Django学习笔记：HTML基础

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子元素：两个文本输入框和一个提交按钮，可以让用户输入用户名和密码等信息并提交给后台服务器。下面列举一些常见的表单元素

  1. input文本输入标签

     <input>输入标签用于接受用户输入的信息，其中的type属性指定输入标签的类型。

     常见的类型如下

     类型	说明
     文本框 text	输入的文本信息直显示在框中
     密码框 password	输入的文本以原点或星号的形式显示
     单选按钮 radio	单选按钮，如性别选择
     复选框 checkbox	复选框，如兴趣选择
     隐藏字段 hidden	在页面上不显示，但提交的时候随其他内容一起提交
     提交按钮 submit	用于提交表单中的内容
     重置按钮 reset	将表单中填写的内容设置为初始值
     文件上传 file	后期扩展内容，会自动生成一个文本框和一个‘浏览’按钮

  2. select选择标签

     select选择标签，提供用户选择内容，如用户所在的省市等

  3. textarea多行文本标签

     多行文本框，如个人信息描述等

  4. label静态文字标签

     用于给个元素定义说明