前端之HTML

↘锁芯ラ 提交于 2019-12-01 05:02:06

1010-1011 前端之html

浏览器

浏览器也是一个客户端

# 这是一个服务器,我们通过浏览器就可以访问的到服务器发送的"hello"
import socket
soc = socket.socket()
soc.bind(('127.0.0.1',8080))
soc.listen(5)
while True:
    conn,addr = soc.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP//1.1 200 ok\r\n\r\n")  # 必须要加上这一句,不然浏览器不认识
    conn.send(b"hello")
    conn.close()

浏览器不通过服务器也可以渲染文本

什么是HTML

HTML全称Hyper Text Markup Language,超文本标记语言,是一种描述性的标记语言。

  • 超文本:音频、视频、图片
  • 标记:称为标记,一个HTML页面都是由各种标记组成。

HTML的作用

负责描述文档语义的语言

编写html的规范

1、所有标记元素都要正确的嵌套,不能交叉嵌套,例如:<h1><a></a></h1>

2、所有标记都必须小写

3、所有标记都必须关闭

  • 双标签:<b></b>
  • 单标签:<img src="URL"/>

4、所有属性值必须加引号。eg:<h1 id="head"></h1>'

5、所有属性必须有值。eg:<a href="01.html" target="_blank">首页</a>

HTML结构

用pycharm新建一个HTML文件,文件会自动生成如下的一个HTML模板

<!DOCTYPE html>
<!--文档声明头,告诉浏览器它应该用什么版本的html去解析以下代码-->

<html lang="en">
<!--文档的开始标记和结束标记,lang="en"表示用英语或者其他国家的语言,在它们之间是文档的头部(head)和主体(body)-->
<head>
<!--定义了HTML文档的开头部分,不会再浏览器的文档窗口显示-->
    <meta charset="UTF-8">
    <!--HTML的编码格式-->
    <title>Title</title>
    <!--网页标题,在浏览器标题栏显示-->
</head>
<body>
<!--文本主体,他们之间的文本是可见的网页主题内容-->

</body>
</html>

常用标签

head内常用标签

基本标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

meta标签

<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
<!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--对网页并没有什么影响,就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->

<meta name="description" content="老男孩教育Python学院">
<!--这个也没有什么影响,就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->

<meta http-equiv="content-Type" charset=UTF8">
<!--指定文档的编码类型-->
                                             
<meta http-equiv="x-ua-compatible" content="IE = edge">
<!--告诉IE以最高级模式渲染文档-->

body内常用标签

1、加粗标签

<b></b>

2 、斜体标签

<i></i>

3、下划线标签

<u></u>

4、标题标签

<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>

5、换行标签

<br>换行</br>

6、水平线标签

<hr></hr>

7、段落标签

<p>段落</p>

8、图片标签(重点) -->其中的属性

<img src="C:/Users/Lenovo/Desktop/图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时的提示信息">

9、链接标签(重点)

a标签又叫做超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

<a href="网页地址" target="在哪个网页跳转"></a>

属性:href:指定目标网页地址;该地址可以有几种类型:
        绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
        相对URL - 指当前站点中确切的路径(href="index.htm")
        锚URL - 指向页面中的锚(href="#top")
     href="#b1"表示b1是id属性,#b1表示回到id属性为b1的这个位置;
     href="body内常用标签.html"表示会跳到body内常用标签.html这个网页;                target="_blank"表示重新打开一个网页进行跳转;
     target="_self"表示就在当前网页进行跳转

eg:
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦!</a>
<!--target="_blank"表示重新打开一个网页进行跳转-->

<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦!</a>
<!--target="_self"表示就在当前网页进行跳转-->

<a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦!</a>
<!--默认target="_self"-->

<a href="#b1">点我回到加粗</a>
<!--b1是id属性,#b1表示回到id属性为b1的这个位置,这个位置就是<b id = "b1">加粗</b> -->

<a href="body内常用标签.html">点我转到这个网页哦!</a>
<!--他会跳到 body内常用标签.html 网页-->

10、无序列表标签(重点)

<ul type="disc"></ul>

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

type属性:

  • type="disc"(实心圆点,默认值)
  • type="circle"(空心圆圈)
  • type="square"(实心方块)
  • type="none"(无样式)

11、有序列表标签(重点)

<ol type="1" start="3"></ol>

<ol type="1" start="3">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

属性:type属性:1:数字列表,默认值;A:大写字母;a:小写字母;Ⅰ:大写罗马;i:小写罗马

​ start属性:start="3" 表示只能写数字,表示从第3个开始

12、标题列表标签

<dl>
    <dt>标题1</dt>
        <dd>内容</dd>
    <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
</dl>

13、表格标签(重点)

<table>
    <thead>  <!--表头-->
        <tr>  <!--行-->
            <th>表内的标题</th>
        </tr>
    </thead>
    <tbody>  <!--表标题下的内容-->
        <tr>
            <td>数据</td>  <!--表内的内容-->
        </tr>
    </tbody>
</table>
属性:
在<table>中设置
    border:表格边距
    cellpadding:内边距
    cellspacing:外边距
    width:像素 百分比
在<td>中设置
    rowspan:单元格竖跨多少行(上下合并单元格)
    colspan:单元格横跨多少行(左右合并单元格)
   

特殊字符

html中特殊符号
空格:&nbsp;
>:&gt;
<:&lt;
&:&amp;
¥:&yen;
版权:&copy;
注册:&reg;

块级标签(div标签)和行内(内联)标签(span标签)

div标签:
<div>
    <!--块级标签,无意义,通过CSS样式为其赋予不同的表现-->
</div>


span标签:
<span>
    <!--内联标签,无意义,通过CSS样式为其赋予不同的表现-->
</span>

块级标签和行内标签的区别

块级标签:另起一行开始渲染元素
内联标签:不需要另起一行
如果单独在网页中插入这两个元素,不会对页面产生任何的影响,他们是专门为定义CSS样式而生的

注意

1、块级标签可以嵌套内联标签或者某些块级标签

2、内联标签不能嵌套块级标签

3、p标签不能嵌套块级标签,也不能嵌套p标签

form表单(很重点)

form表单功能

  • 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
  • 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等
  • 表单还可以包含textarea、select、fieldset和label标签

form表单属性

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

表单元素

表单工作原理

访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。

input标签

<input/>元素会根据不同的type属性,变化为多种形态

  <form>
        姓名:<input value="呵呵" >小可爱<br>
        昵称:<input value="哈哈" readonly=""><br>
        名字:<input type="text" value="name" disabled=""><br>
        密码:<input type="password" value="pwd" size="50"><br>
        性别:<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        爱好:<input type="checkbox" name="love" value="sing">唱
              <input type="checkbox" name="love" value="jump">跳
              <input type="checkbox" name="love" value="rap">rap
    </form>
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />

属性说明:

1)type="属性值"文本类型。属性值可以是:

  • text默认

  • password密码类型

  • radio单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
    )。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。

  • checkbox多选按钮,名字相同的按钮作为一组进行选择。

  • checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。

  • hidden隐藏框,在表单中包含不希望用户看见的信息

  • button普通按钮,结合js代码进行使用。

  • submit提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。

  • reset重置按钮,清空当前表单的内容,并设置为最初的默认值

  • image图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。

  • file文件选择框。
    提示:

    如果要限制上传文件的类型,需要配合JS来实现验证。

    对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。

2)value="内容":文本框里的默认内容(已经被填好了的)

3)size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦

4)readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。

5)disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。

select标签(下拉标签)

<form>
    <select name="city" id="city">
        <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">广州</option>
     <option value="4">深圳</option>
    </select>
</form>

属性说明:

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

label标签(非重点)

定义:<label> 标签为 input 元素定义标注(标记)。
说明:

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label>标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
    <!--与在<input/>前直接写用户名:作用一样-->
</form>

textarea多行文本框

<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>

属性说明:

  • name:名称
  • cols:列数
  • rows:行数

表单的语义化举例

我们在注册一个网站的信息的时候,有一部分是必填信息,有一部分是选填信息,这个时候可以利用表单的语义化。

<form>
    <fieldset>
    <legend>必填信息</legend>
    姓名:<input value="呵呵">逗比
    <br>
    昵称:<input value="哈哈哈说的就是你" readonly="">
    <br>
    名字:<input type="text" value="name" disabled="">
    <br>
    密码:<input type="password" value="pwd" size="50">
    <br>
    性别:<input type="radio" name="gender" value="male">男
          <input type="radio" name="gender" value="female">女
    邮箱:<input type="email" name="user_email">
         <!--type="email" name="user_email"在提交时会提醒你,必须要符合邮箱的规范-->   
    </fieldset>
    
    <fieldset>
    <legend>其他信息</legend>
    爱好:<input type="checkbox" name="love" value="eat">吃饭
          <input type="checkbox" name="love" value="sleep">睡觉
          <input type="checkbox" name="love" value="buy">买买买
    </fieldset>
</form>

HTML标签总结

1、块级标签:块级大多为结构性标记

  • 总是从新的一行开始
  • 高度、宽度都是可控的
  • 宽度没有设置时,默认为100%
  • 块级标签中可以嵌套行内标签和某些块级标签
  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

2、行内标签:行内大多为描述性标记

  • 和其他元素都在一行
  • 高度、宽度以及内边距都是不可控的
  • 宽高就是内容的高度,不可以改变
  • 行内标签只能嵌套行内标签,不能嵌套块级标签

==p标签不能嵌套块级标签,也不能嵌套p标签

<span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!