前端之HTML

 

前戏

一、简介

HTML（超文本标记语言）是一种面向描述的用于开发web网页的一种语言。

网页文件的扩展名：.html或.htm
HTML开发没有任何的逻辑，就是记的东西有点多。

二、注释

正所谓注释是代码之母，我们学习每一种语言都应该先学习其注释。
Python中对HTML的注释格式是<!--注释内容-->，如下：

<!--单行注释-->
<!--多行注释
    多行注释
-->

ps:快捷键为ctrl + /

HTML

一、特性

html语言是基于HTTP协议下的语言，而HTTP协议具有如下四大特性：

  1. 基于请求响应
    只有当你请求访问时，html才会做出反应
    就好比癞蛤蟆，你戳一下，它动一下

  2. 基于TCP/IP作用于应用层之上的协议
    就是要满足一定的网络通信规范，关于TCP/IP可参见TCP/IP协议

  3. 无状态
    不保存用户的信息，就算你访问了一千次，http也待你如陌生人一样

    ps:由于http是无状态的，所以有时为了记录用户状态，可以使用cookie、session、token等技术

  4. 短链接
    就是你来一次我响应一次，之后我们之间就没有任何关系了

    ps: websocket可以建立长链接，默认建立连接后不断开

二、html结构

首先新建一个html_study.html文件，观察初始格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

html结构可以分为三部分：

  1. 响应首行：用于标识HTTP协议版本、状态码、语言等内容

    <!DOCTYPE html>
<html lang="en">
...
</html>

  2. 响应头：可以看成是一大堆键值对，用于书写给浏览器看的内容

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

  3. 响应体：用于写展示给用户看的内容

    <body>
...
</body>

head内常用标签

title标签

title标签用于书写网页标题（在网页最上端显示的标签名）

<title>my first html</title>

style标签

style标签用于在内部书写css代码

    <style>
        h1{color:red;}
    </style>

link标签

<link rel="stylesheet" href="outside.css">

script标签

script标签用于内部书写js代码或引入外部js文件

    <!--内部书写js代码-->
    <script>alert('access successfully')</script>
    <!--引入外部js文件：outside文件-->
    <script src="outside.js"></script>

meta标签

meta标签用于提供一些页面的元信息，包括一些描述和关键词
(了解)meta标签常用有两个属性：http-equiv和name

  1. http-equiv:相当于html的文件头，用于向浏览器传一些信息或一些跳转操作，其属性值为content 
    <!--显示文档编码类型-->
<meta http-equiv="content-type" charset="UTF-8">
<!--两秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
  2. name：用于向浏览器机器人提供一些描述网页的信息和分类词，其属性值表述在content中 
    <meta name="keywords" content="python,weer,study">
<meta name="description" content="weer的博客 python study">

body内常用标签

基本标签

h1~h6表示一级到六级标题
b是文本加粗标签，i是文本斜体标签，p是段落标签
u是下划线标签，s是删除线标签
br是换行标签，hr是水平分割线标签

<h1>this is the h1</h1>
<h2>this is the h2</h2>
<h3>this is the h3</h3>
<h4>this is the h4</h4>
<h5>this is the h5</h5>
<h6>this is the h6</h6>
<b>加粗</b>
<p>this is a paragraph</p>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br>换行（转到下一行）
<hr>加了一个分割线

列表标签

列表分为无序列表和有序列表以及带标题的列表

  1. 无序列表
    ul标签里搭配li标签嵌套，type指定形状，如circle（默认）、square等 
    <ul type="square">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
 </ul>
    结果如下：
    结果
  2. 有序列表
    ol标签里搭配li标签嵌套，type指定数字类型（I，1，a，A等），start指定起始编号 
    <ol type="1" start="2">
      <li>第一步</li>
      <li>第二步</li>
      <li>第三步</li>
</ol>

          结果
3. 标题列表（了解）

    <dl>
        <dt>title 1</dt>
        <dd>content 1</dd>
        <dt>title 2</dt>
        <dd>content 2</dd>
    </dl>

表格标签

table标签用于绘制表格，分为thead和tbody。thead用于提示各列的属性，tbody用于显示表格内的内容。
table中可以加border属性，用于显示外边框（很丑，但后期可以美化），整数表示外边框厚度

<table border="1">
        <thead>
            <tr>
                <th>username</th> <!--th表示加粗文本-->
                <td>password</td> <!--td表示普通文本-->
                <td>hobby</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>123</td>
                <td>cook</td>
            </tr>
        </tbody>
</table>

基本、列表、表格标签完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!--网页标题-->
    <title>my first html</title>
    <!--内部写css代码-->
    <style>
        h1{color:red;}
    </style>
    <!--引入外部css文件：outside文件-->
    <link rel="stylesheet" href="outside.css">
    <!--内部书写js代码-->
    <script>alert('access successfully')</script>
    <!--引入外部js文件：outside文件-->
    <script src="outside.js"></script>
    <!--显示文档编码类型-->
    <meta http-equiv="content-type" charset="UTF-8">
    <!--两秒后跳转到百度-->
<!--    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">  -->
    <meta name="keywords" content="python,itleaner007,study">
    <meta name="description" content="itlearner007的博客python study">
</head>
<body>
<!--基本标签-->
    <!--h1~h6级标题-->
    <h1>this is the h1</h1>
    <h2>this is the h2</h2>
    <h3>this is the h3</h3>
    <h4>this is the h4</h4>
    <h5>this is the h5</h5>
    <h6>this is the h6</h6>
    <p>this is a paragraph</p>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <br>换行（转到下一行）
    <hr>加了一个分割线
<!--列表标签-->
    <!--无序标签-->
    <ul type="square">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
    </ul>
    <!--有序标签-->
    <ol type="1" start="2">
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ol>
    <!--标题列表-->
    <dl>
        <dt>title 1</dt>
        <dd>content 1</dd>
        <dt>title 2</dt>
        <dd>content 2</dd>
    </dl>
    <!--表格标签-->
    <table border="1">
        <thead>
            <tr>
                <th>username</th> <!--th表示加粗文本-->
                <td>password</td> <!--td表示普通文本-->
                <td>hobby</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>123</td>
                <td>cook</td>
            </tr>
            <tr>
                <td>John</td>
                <!-- colspan表示水平方向占2格，rowspan表示竖直方向占格 -->
                <td colspan="2">drink</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
基本、列表、表格标签完整代码

div标签

div标签用于占位，可以把它看成是一个水平容器，里面可以放任意块级标签和行内标签，也可以嵌套分区域。

<div style="height:200px;background-color:red;">一块区域</div>
    <div style="height:200px;background-color:green">一块区域
        <div style="height:100px;background-color:purple">
            区域里的区域
        </div>
    </div>

span标签

span标签为行内标签，文本有多大其就有多大且需手动换行

<span>我是span</span>
<span>我是span2</span>

注意

块级标签&行内标签

I:块级标签
不管文本多大，它都会先独占一行
可以修改其宽度和高度
块级标签内部可以嵌套任意块级标签和行内标签
如h1~h6级标签，p标签，div标签，label标签，input标签等等
II:行内标签
文本有多大，标签所占位置就有多大
行内标签内只能嵌套行内标签
如i,u,s,b,span标签等

 

标签必备两个属性

 

    1. id值
      就好比每个人的身份证号码，各不一样，用于区分和后面写css、js代码时便于选择
    2. class
      继承某个类，不同标签可以是同一个class取值

 

a标签

<a href="" target=""></a>

a标签又称链接标签，有两个功能：

  • 超链接
    href中放一个完整的URL地址时，点击内容即可跳转到相应网站
    <a href="https://www.baidu.com" target="">click me to baidu</a>

    target默认为_self，即在当前页面跳转；当设置target=“_blank”时，新建一个空白页面跳转

  • 锚点
    设置href为某个标签的#+id值时，点击文本内容即可跳转到id所对应的位置
    <div style="height:1000px;background-color:red;" id = 'd1'>一块区域</div>
<a href="#d1">click me to 一块区域</a>

img标签

<img src="" alt="" title="">

img标签用于在网站显示图片。src是图片路径，可以是url，也可以是本地路径；alt是图片加载不出来时的描述(如网不好时有些图片看不到，只显示alt的内容)；title是将鼠标放于图片上时的提示信息

<img src="yanhua.png" alt="烟花" title="yanhua">

表单标签

表单标签form能够获取用户输入数据（用户输入、用户选择、用户上传等），并把它传给后端服务器

如某宝的登录界面

                       

<form action="">
        
</form>

表单属性

属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

在pycharm中写form然后tab键可得如上代码，其中action表示数据提交的路径：

  1. 不填：表示向当前页面的url处提交
  2. 完整url如https://www.baidu.com，即向百度服务器提交
  3. 只写路径后缀如’/index/'，则自动识别电脑的ip和port结构加在前面

1、label

label标签即文本标签，用于显示不可修改的文本提示信息，怀里通常嵌套input标签等。
并且label标签里的for属性可以绑定input标签的id值，当点击label的文本信息时，鼠标就会自动跳到输入框中进行输入操作

<form action="">
     <label for="a1">用户名
          <input type="text" id="a1">
      </label>
</form>

2、input

input标签，顾名思义，即为用户输入标签。通过指定type的类型有不同的输入方式：

<input type="text" id="">
  • type=“text”（默认）

表示普通文本输入框，可以输入任意内容（汉字、英文、数字…）

  • type=“password”

密文，比如输入密码时自动用*或圆点.隐藏显示

  • type=“date”

日期，自动调用内置日历，选择即可

  • type=“submit”

提交按钮，发送数据给服务器，会刷新网页。默认显示的是“提交”，可通过设置value更改

  • type=“button”

就是一个普通按钮，但可通过绑定事件实现功能

  • type=“reset”

重置按钮，即清空所有已输入的内容，默认文本为“重置”

  • type=“radio”

单选框，必须有name属性才能实现单选，value属性绑定每个选项的变量由于分别。

checked（checked=checked）表示默认选中

<label>性别：
       <input type="radio" name="sex" value="male">男
       <input type="radio" name="sex" value="female" checked>女
       <input type="radio" name="sex" value="other">其它
</label>
  • type=“checkbox”

多选框，表示可多选。checked表示默认选中

  • type=“file”

自动调取获取文件函数，也可获得多个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html study 2</title>
</head>
<body>
    <form action="">
        <label for="a1">用户名
            <input type="text" id="a1">
        </label>
        <p><label for="a2">密码<input type="password" id="a2"></label></p>
        <p><label for="a3">日期<input type="date" id="a3"></label></p>
        <p>
            <label for="a4"><input type="submit" value="登录" id="a4"></label>
            <label><input type="button" value="按钮"></label>
            <label><input type="reset" value="取消"></label>
        </p>
        <p>
            <label>性别：
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="female" checked>女
                <input type="radio" name="sex" value="other">其它
                <!--必须有name值才能实现单选，checked(或checked='checked')表示提前默认选中-->
            </label>
        </p>
        <p>
            <label>hobby:
                <input type="checkbox" value="喝茶">drink tea
                <input type="checkbox" value="打游戏" checked>play games
                <input type="checkbox" value="看电视">watch tv
                <input type="checkbox" value="睡觉" checked>sleep
            </label>
        </p>
    </form>
</body>
</html>
完整代码

                                                                                          

3、select

列表式选取标签，option内加多选内容，可加multiple表示多选，selected表示默认选中

<select name="" id="" multiple>
      <option value="">1</option>
      <option value="" selected>2</option>
      <option value="">3</option>
</select>

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

4、textarea

大段文本标签，常用来写一些自我简介啊、经历啊什么的

<label for="">自我简介<textarea name="ddd" id="ppp" cols="30" rows="10"></textarea></label>

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用

5、注意

A：form标签默认提交数据的方式是get请求，数据是直接放在url后面的
可以通过method="post"指定提交方式为post请求

<form action="" method="post"></form>

B：当利用type=“file”传文件时，form标签的提交方式必须是post，且应有enctype=“multipart/form-data”

<form action="" method="post" enctype="multipart/form-data"></form>

C：能触发提交数据的方式：

  • 1.<input type="submit" id="">
  • 2.<button>提交</button>

 

 

 

posted @ 2022-10-23 20:02  weer-wmq  阅读(60)  评论(0)  编辑  收藏  举报