博客

Python全栈最全学习之路-WEB前端（一）

  • Post author:
  • Post category:python




HTML简介



一、HTML介绍

在这里插入图片描述



1、HTML



1-1、

H

yper

T

ext

M

arked

L

anguage


超文本标记语言

，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。



1-2、标签

HTML标签页可以成为

元素

，不同的标签有不同的功能解释，用来表示不同的功能，每个标签都是由一对尖括号包裹的单词组成。一般的标签是成对出现的，一般称第一个标签是

开始标签

，第二个是

结束标签

，开始和结束标签也称为开放标签和闭合标签。



1-3、W3C

HTML由W3C制定的，

W3C

（

World Wide Web Consortium

）是一个非盈利性组织，在中国的北京航空航天大学设有分部。



2、HTML整体

<!DOCTYPE html> <!--超文本-申明文档类型-->
<html lang="en"> <!--html元素表示一个HTML文档的根（顶级元素）根元素。所有其他元素必须是此元素的后代。-->
<head>
    <!--head元素表示头部信息-规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等-->
    <meta charset="UTF-8">
    <!--mata表示那些不能由其它HTML元相关元素（<base>,<link>,<script>,<style>或<title>)之一表示的任何元数据信息-->
    <title>百度一下</title> <!--title元素定义文档的标题，显示在浏览器的标题栏或标签页上-->
</head>
<body> <!--body表示文档的内容，真正页面的主体，body包裹的内容即浏览器窗口中展示的内容-->
    你多大了？我18。
</body>
</html>

页面整体分为两部分：

一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。

一部分是body部分，这部分内容则会在浏览器中展示出来



二、常见标签



1、常见分类

（1）：根元素、文档元数据、分区根元素

（2）：内容分区、文本分区

（3）：内联文本语义、图片和多媒体

（4）：内嵌内容、脚本

（5）：编辑标识、表格内容

（6）：表单、交互元素

（7）：Web组件



2、标签即使用



2-1、标签

1、由一对尖括号包裹单词组成

如：

<body>


2、标签不区分大小写，推荐小写



2-2、嵌套

标签可以嵌套，但不能交叉嵌套

正确用法：


<body><table></table></body>


错误用法：


<body><table></body></table>



2-3、使用规则

开始标签-标签体-结束标签

如：

<a>百度</a>


自闭合标签直接使用

如：

换行，水平线，输入框，图片


<br>,<hr>,<input>,<img>



2-4、标签属性

a. 通常为键值对形式出现，eg：color=“red”

b. 属性只能出现在开始表现和闭合标签内

c. 属性名字全部小写，展性值必须用单引或者双引包裹

d. 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）



3、标签介绍

块级（块状）标签和内联（行内）标签：

（1）：块级标签：

<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>


（2）：内联标签：

<a>/<input>/<img>/<sub>/<sup>/<textarea>/<span>


（3）：块级元素的特点：

总在新行上开始

高度，行高以及外边距和内边距都可控制

宽度缺省，则是它容器的100%

它可以容纳内联元素和其他块元素

（4）：inline元素特点：

和其他元素在一行上

高，行高以及外边距和内边距不可改变

宽度就是其文字或图片宽度，不可改变

内联元素只能容纳文本或者其他内联元素

（5）：

行内元素注意

：

设置宽度width无效

设置高度height无效

设置margin只有左右margin有效，上下无效

设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的



4、块级标签介绍

标题标签

一般用在文章的标题，有h1-h6 

<!DOCTYPE html> <!--超文本-申明文档类型-->
<html lang="en"> <!--html元素表示一个HTML文档的根（顶级元素）根元素。所有其他元素必须是此元素的后代。-->
<head>
    <!--head元素表示头部信息-规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等-->
    <meta charset="UTF-8">
    <!--mata表示那些不能由其它HTML元相关元素（<base>,<link>,<script>,<style>或<title>)之一表示的任何元数据信息-->
    <title>百度一下</title> <!--title元素定义文档的标题，显示在浏览器的标题栏或标签页上-->
</head>
<body> <!--body表示文档的内容，真正页面的主体，body包裹的内容即浏览器窗口中展示的内容-->
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
我是第几级标签呢
</ul>
</body>
</html>

在这里插入图片描述


段落标签


用于文章段落


列表标签


列表标签分为：有序列表、无序列表以及定义


div标签


分隔一块区域



5、行内标签介绍


图片标签


用于在网页中插入图片


粗体/斜体标签


用于网页中突出字体


超链接标签


用于链接其他资源，可以用来跳转或者锚点


文字标签


span标签是纯文本，配合CSS则可以展示不同效果



6、HTML转移

字符 转义字符
”
&quot;
&
&amp;
<
&lt;
>
&gt;
空格
&nbsp;
全角空格（宽度刚好一个中文宽度）
&emsp;
©版权
&copy;
￥
&yen;
®已注册
&reg;
±
&plusmn;



三、内行元素和块级元素

<!DOCTYPE html> <!--超文本-申明文档类型-->
<html lang="en"> <!--html元素表示一个HTML文档的根（顶级元素）根元素。所有其他元素必须是此元素的后代。-->
<head>
    <!--head元素表示头部信息-规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等-->
    <meta charset="UTF-8">
    <!--mata表示那些不能由其它HTML元相关元素（<base>,<link>,<script>,<style>或<title>)之一表示的任何元数据信息-->
    <title>百度一下</title> <!--title元素定义文档的标题，显示在浏览器的标题栏或标签页上-->
</head>
<body> <!--body表示文档的内容，真正页面的主体，body包裹的内容即浏览器窗口中展示的内容-->
<!--首先来让标题居中-->
<h1 id="home_top" style="text-align: center;background: greenyellow;">搞笑段子分享</h1>
<!--当我们这么写的时候，发现这个时候背景是整行的，如果需要设置这个字段北京，就需要使用span标签-->
<span style="background: greenyellow;color: brown;">搞笑段子</span>
<!--我们使用span元素来包裹一段文本，便于给文本加样式 span是一个容器，没有任何特殊功能-->
<!--但是如果想要设置整个文本当中的字体的一些信息，可以把每个文字都用span包裹，但是这样肯定是非常繁琐的，所以还有一个块级标签，可以用来包裹一个快-->
</body>
</html>

在这里插入图片描述

行内元素对文字可以提供更加丰富的操作空间

块级元素更多是用于整体的构造



四、表格



1、表格介绍

表格解释

什么是表格：和大家常见的excel表格类似

作用：表格的作用主要以表格形式来展示数据

表格主体内容：主要分为表头、单元格、表脚



2、表格内容

table：表格标签

包裹整个表格

thead：表头标签

默认加粗、居中

tbody：表身

正规要写，实际中常会省略

tfoot：表脚

结尾，一般没写



3、table



五、表单



1、表单介绍


表单介绍


表单是搜集用户数据信息的各种表单元素的集合区域


表单作用


用于收取用户数据并向后台发送，前台交互的方式之一


表单应用


表单常应用于

登录注册

，

搜索

，

文件上传

等



2、表单属性


action


提交时候的地址，默然使用当前页面


method


提交时候的方法，有get和post两种方法，默认使用get


entype


设置编码格式有三种

默认：application/x-www-form-urlencoded

上传文件：multipart/form-data

不建议使用：text/plain



3、input常用type属性值

类型 表示
文本框 text
密码框 password
单选框 radio
隐藏域 hidden
复选框 checkbox
文件选择 file
提交 submit
重置 reset



4、input属性


name


表单与后台交互时最重要的一个属性，要求input标签都带上表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用


value


表单提交项的值。input的值，单选多选下拉框必须设置value属性，这样后台才能获取到你选中的到底是哪个或哪几个选项


其他



placeholder

：提高用户体验度


readonly

：只读


disabled

：禁用



5、select下拉框


option：下拉选项


下拉框的基本标签，有多少个option就有多少个下拉选择


selected：下拉状态


表示选中某个下拉选项


name：下拉框的名字


表示下拉框向后台提交数据的时候，所传的名字


size：下拉框显示


表示下拉框，显示多少个，默认为一个



6、表单其他标签


fieldset


给表单设置分组


legend


设置分组表单的标题


label


提高用户体验度



7、form包含元素

在这里插入图片描述 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        span{
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h2>请注册</h2>
<p>已有账号？
    <span>
        登录
    </span>
</p>
<form action="HTML1_4.html">
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
    手机号：<select name="phone" id="number">
    <option value="phone_number">+86</option>
    <input type="text" placeholder="请输入手机号" name=""><br>
    密&emsp;码：<input type="password" placeholder="请设置登录密码" name="pwd"><br>
    验证码：<input type="text" placeholder="请输入验证码" name="yzm">
    <input type="submit" value="获取验证码"><br>
    <input type="checkbox" disabled>阅读并接受协议
    <br>
    <input type="submit" value="注册">
</select>
</form>
</body>
</html>

在这里插入图片描述


版权声明：本文为Sdhrs_nn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。