html学习

 https://www.cnblogs.com/hansha/p/10075017.html

介绍

html  相当于给网页设计骨架
css  添加漂亮效果
js   给页面添加动态效果
jquery  对js语言的封装
bootstrap 实对js和jquery的封装

 

网页显示数据的流程
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

html是什么?
超文本标记语言是一种用于创建网页的标记语言,是基于vs(浏览器)框架下的语言(仅此而已,不是编程语言)
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

 

#html文档结构
1.<!DOCTYPE html>   #声明为html5文档,向web浏览器声明提交的html版本,必须唯一<html>标签之前
2.<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
3.<html>、</html>是文档的开始标记和结束的标记。在它们之间是文档的头部（head）和主体（body）
4.<head>、</head>HTML文档的开头。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
5.<body>、</body>之间的文本是可见的网页主体内容。
6.<title>、</title>定义了网页标题，在浏览器标题栏显示。
注意
<meta charset="utf-8">  声明编码,否则胡出现乱码.有些浏览器默认是gbk编码,需要这里设置为gbk编码
网页地址以file:/// 也是一种协议(打开本地文件的协议,仅限于相对路径)

　　HTML标签格式

  • HTML标签是由尖括号包围的关键字，如<html>, <div>等
  • HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
  • 标签里面可以有若干属性，也可以不带属性。如果带属性，必须有属性值，属性值放到引号里
  • 标签字母全部是小写

　　标签的语法：

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
  • 空白折叠

　　几个很重要的属性：

  • id：定义标签的唯一ID，HTML文档树中唯一
  • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
  • style：规定元素的行内样式（CSS样式）

　　HTML注释

<!--注释内容-->

 

 

head中的标签

head标签都放在头部分之间。这里面包含了：

​ <title>、<meta>、<link>，<style>

  • <title>：指定整个网页的标题，在浏览器最上方显示。(搜索引擎可以通过网页标题,迅速判断出当前网页的主题)

　　　　

  • <meta>：提供有关页面的基本信息
  • <link>：定义文档与外部资源的关系。(通常用于链接到样式表)
  • <style>:定义内部样式表与网页的关系

 

头标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

 

meta 标签

1、http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->  # http-equiv='refresh' 刷新 ;  name='keywords' 是一些描述信息
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

 

2、name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

 

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

 

 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做*SEO**（search engine optimization，搜索引擎优化）。*

 

红框里的就是描述信息

 

body中的标签

基本标签 #都不独占一行
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1> #h1~h6,标题标签(独占一行,显示的大小为降序)


<tr> #一行
<br> #换行
<hr> #水平线(单独的一个很长的线)

　　 input标签(给用户输入信息)

　　type属性值介绍: 

  • text 单行输入文本 <input type=text" /> #"text","password","hidden"为数据框的初始值
  • password 密码输入框（不显示明文）
  • date 　　 日期输入框
<form action="" method="get">
　　<p>
    <input type="date" name="date">
　　</P>
</form>
#出现一个让你选择日期的下拉选项,如果你没选,提交时就没有该框的数据
  • checkbox 多选框   凡是用户选择的框,必须设置value键值对,否则后端无法识别选了什么,用户自己填写的不需要写value,只需要name键值对,用于上传时当key
<form action="" method="get">
    <!--#一定要用get模式,否则地址栏看不到提交的数据-->
<p>
    爱好:
    <input type="checkbox" name="hobby" value="cy">抽烟  #这后面可以再添加个属性checked 设置默认选项
    <input type="checkbox" name="hobby" value="hj">喝酒
</p>
    <input type="submit">
    <!--所有的数据都要设置这个才能向浏览器提交-->
</form>
  • radio 　　单选框 　凡是用户选择的框,必须设置value键值对,否则后端无法识别选了什么,用户自己填写的不需要写value,只需要name键值对,用于上传时当key
<form action="" method="get">  #一定要用get模式,否则地址栏看不到提交的数据
<p>
 性别<input type="radio" name="gender" value="man">男  
     <!--name是为了让2个输入框产生关联,让用户2选1,加个value 为了页面能区分男女-->
  <input type="radio" name="gender" value="woman">女
</p>
<input type="submit">
</form>
  • submit 　提交按钮 　　发送提交所有输入框中的内容，配合form表单使用，页面会刷新
会将form表单中所有用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以我们自己写的那个socket举例，打印一下接收的内容），但是所有的输入标签必须有一个叫做name的属性。
 特别是单选框,还要再写个nalue的键值对,否则没法区分用户选的哪个
  • reset 重置按钮 　　　　将所有输入框里的内容清空
  • button 普通按钮 　　　　就是普通按钮,点完但不提交,不做任何改变
有一个跟他同名的标签,跟submit提交按钮很相似.(了解)
<button type="button">迁都</button>
#当设置type='button'的时候,该标签不提交
  • hidden 隐藏输入框 　　　　当用户选择提交的时候,会给浏览器发送,后面讲django会讲到它
  • file 文本选择框 　　　　<input type="file" />
#用file类型的框,form的method(方法)必须是post,并且enctype(编码格式)也要写上
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file">  #name是提交时,对应的key
<p>
    <input type="submit" name="asdf">
</p>
</form>

　　select  标签(下拉选择框)

  • select标签
    • <select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。
    • <select>标签的属性：
      • multiple：可以对下拉列表中的选项进行多选。没有属性值。
      • size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
    • <option>标签的属性：
      • selected：预选中。没有属性值。
  • label标签
    • 通过for属性，将lable和input标签绑定，为 input 元素定义标注（标记）。  #相关  勾选性别那个,直接点字不行,但是再input下继续写个这个标签,然后for绑定,就可以点字选择了

　　textarea 文本输入框,input的文本输入框只能输一行,这个可以输入多行.

textarea(多行的文本输入框):
  参数:(rows:设置行数  cols:设置列数)

 

<form action="">
    <!--<select name="school" id="1" >-->
    <select name="school" id="" multiple>
        <!--mutiple  设置为多选框-->
        <option value="qh">清华</option>
        <option value="jq" selected>剑桥</option>
        <!--selected 设置默认选项-->
        <option value="bd">北大</option>
    </select>
        <input type="submit" name="gg">
</form>

 

from 表单

功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
一般里面放 <input>标签系列，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

 

属性                        描述
accept-charset    在被提交表单中使用的字符集（默认：页面字符集）。
action="https://www.xiaodu.com/"   向何处提交表单的地址（URL）（提交页面）。
autocomplete      浏览器应该自动完成表单（默认：开启）。
enctype           被提交数据的编码（默认：url-encoded）。
method="post"    提交表单时用的 http 方法（默认：get,输入的账户密码以&分割,显示在地址栏,如果不想显示用post模式）。
name             规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate       规定浏览器不验证表单。
target           规定 action 属性中地址的目标（默认：_self）。

 

form表单提交数据的步骤
1.from 表单中的action 设置一个要提交到的url
2.input 输入框添加一个name属性,name属性时上传数据时,对应的key
3.要有一个提交按钮,例如input的type是submit,button标签

上传文件需要注意:
1.必须是post请求
2.form 标签上添加一个属性:enctype="multipat/from-data"

特殊字符

&nbsp;  表示空格
&gt;  表示>
&lt;  表示<
&amp;  表示&
&yen;  表示 ¥
&copy;  版权标识（写公司网站的时候会用到）
&reg;  注册（一个圆圈里面有个R）

注释

写法( 注释的内容不会在网页上显示出来):
<!--注释内容-->

div 标签和span 标签

　　div：把标签中的内容作为一个块儿来对待。必须单独占据一行。

　　div标签的属性：

  • 　　　　align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

<body>

    <div>
        导航栏
    </div>
    <div>
        中心banner
    </div>
    <span>路飞</span>
    <span>alex</span>
    
</body>

 

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，当然也可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、ol、div。

span举例：

<p>
        商品简介:
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
</p>

 

div举例：

<div class="header">
    <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
<div class="footer"></div>

 

img图片标签(引入图片)

img: 代表的就是一张图片。是单边标记。
img是自封闭标签，也称为单标签。

能插入的图片类型：
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

src属性：指图片的路径。
在写图片的路径时，有两种写法：相对路径、绝对路径(网络路径)
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
img标签的常用其它属性
  • width：宽度
  • height：高度
  • title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
  • align：指图片的水平对齐方式，属性值可以是：left、center、right
  • alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

a标签(超链接标签)

1.超链接

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

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
 #target的值有两个(_blank,_self)_blank 在新页面打开目标网页;  _self 再当前页面打开目标网页

相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>

2、锚链接

指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。

 

<div id="top1">这是div1</div>

<div style="height: 2000px;"></div>

<div id="top2">这是div2</div>

<div style="height: 2000px;"></div>

<a href="#top1">回到div1</a>
<a href="#top2">回到div2</a>

 

　　超链接的属性

  • href：目标URL
  • title：悬停文本。
  • name：主要用于设置一个锚点的名称。
  • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
    • _self：在同一个网页中显示（默认值）
    • _blank：在新的窗口中打开。
    • _parent：在父窗口中显示
    • _top：在顶级窗口中显示
ps:a是一个文本级的标签
比如一个段落中的所有文字都能够被点击，那么应该是p包含a；
<p>
    <a href="">段落段落段落段落段落段落</a>
</p>

而不是a包裹p：
<a href="">
    <p>
        段落段落段落段落段落段落
    </p>
</a>
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

 

列表

ul (无序列表#就是再前面只显示个黑点)
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

 

ol (有序列表)
<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性： start是从数字几开始
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl(标题标签(就像大纲一样，有一个层级效果）)
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

 

table标签 (表格标签)


<tr></tr>  #显示在一行
<th></th>   #标题的单元格,有加粗的效果
<td></td>  #身体和脚部行的一个单元格
<thead>  #标题(头部)部分
<tboby>  #内容(身体)部分
<tfoot>  #末尾(脚部)部分

表格的基本结构：
<table border='1'>
  <thead> #标题部分
  <tr> #一行,下面的内容都在一行
    <th>序号</th> #一个单元格
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td>1</td> #一个单元格
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

属性:

border: 表格边框.
cellpadding: 内边距 （内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行(向下)
colspan: 单元格横跨多少列（即合并单元格）

 

css回顾

1.行内样式

　　直接再创建标签时,在标签中添加一个style属性,属性值写要设置的样式

2.内接样式

　　再head中,添加一个style属性,在标签中写要设置的样式

3.外界样式

　　再head中,添加一个link标签,在href中指定要导入的css样式文件的路径.

　　在css样式文件中写样式

 

基本选择器

1. 标签选择器

　　直接写标签名

2.id选择器

　　#id

3.class类选择器

　　.类名

 

 socket 服务端写网页信息

import socket
server = socket.socket()
ip_port = ('127.0.0.1',8001)
server.bind(ip_port)
server.listen()
conn,addr = server.accept()
from_browser_msg = conn.recv(1024)
print(from_browser_msg)
conn.send(b'HTTP/1.1 200 ok \r\n\r\n')#http/1.1 协议的版本,200 ok 给浏览器个(正常)状态码, \r\n..后面写你要显示的内容
with open('01test01.html','rb') as f:
    data = f.read()
    conn.send(data)

 

posted @ 2019-01-23 12:36  Tank-Li  阅读(257)  评论(0)  编辑  收藏  举报