前端之HTML

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

")  # 必须要加上这一句，不然浏览器不认识
    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:外边距
    像素 百分比
在<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 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<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>  下拉列表