day42 前端-html入门

时间 2019-11-08

标签 day42 day 前端 html 入门栏目 HTML 繁體版

原文原文链接

Html

本身实现一个服务端

把浏览器当成一个客户端来实现server端与客户端的交互html

import socket 


server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
conn, addr = server.accept()
msg = conn.recv(1024)
print(msg)  #
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')  #若是想把浏览器做为客户端来访问该服务端，服务端与浏览器交互须要知足HTTP协议的规范，HTTP协议的详细内容会在Django基础讲解。
conn.send(b'OK')
conn.send(b'<h1>OK</h1>')  # 返回浏览器一个用<h1></h1>包装过的OK，在浏览器段咱们会发现OK变得又大又粗了。
conn.close()

server.close()

HTML概述

HTML（Hypertext Markup Language）中文：超文本标记语言。
它不是一门编程语言，是一种描述性的标记语言（没有编译过程），用于描述超文本内容的显示方式，好比：字体、颜色、大小等。
- 超文本：超越文本，在文本之上更丰富，还能够加超级连接，最多见的超连接内容有：视频、图片、音频等。
- 标记：<单词或者字母>成为标记，一个HTML页面是由多个标记组成。
HTML中除了标签（语义）其余什么都没有　　
HTML内的常见内容（术语）：
- 网页：由各类标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记： <p>称为开始标记，</p>称为结束标记，也叫标签。每一个标签都规定好了特殊的含义。
- 元素：<p>内容</p>称为元素。
- 属性：给每个标签所作的辅助信息。

HTML基本数据结构

最基本的文本结构:前端

<!--doctype html 为了告诉浏览器个人文件类型,html默认是意思是html5规则,这里后期的学习不用改,必定记住了-->
<!DOCTYPE html>

<!--告诉浏览器我是英文,告诉浏览器是哪一种语言 "zh-cn" 是中文-->
<html lang="en">

<head>
    <!--网站配置-->
    <meta charset="UTF-8">
    <!--网站标题-->
    <title>Title</title>
</head>

<!--body是浏览器要显示的内容-->
<body>
哈哈哈
<strong>哈哈哈</strong>
</body>
</html>

HTML经常使用标签

<!DOCTYPE html>

每一个HTML文件须要有一个此标签，来告知浏览器应该用那种规范来渲染HTML文件内容。
<!DOCTYPE>必须在文档的第一行，位于<html></html>以前。
<!DOCTYPE>做为了解部份内容连接：http://www.w3school.com.cn/tags/tag_doctype.asp

<head>内经常使用标签

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

<meta>html5

　　meta简介:编程

<meta>标签为自闭和标签（单身标签）。
<meta>标签位于文档的头部，不包含任何内容。
<meta>标签提供的内容是用户不可见的。
<meta>标签元素可提供有关页面的原信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。

　　meta的两个属性：浏览器

　　　meta共有两个属性，分别是：http-equiv属性和name属性。不一样的属性拥有不一样的参数值，这些不一样的参数值实现了不一样的页面功能。服务器

http-equiv属性：至关于http的文件头做用，它向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
```
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
```

<body> 内经常使用标签

　　基本标签:数据结构

字体标签	<font>不同意使用，html5中已经废弃此标签</font>app <u>若是文本不是超连接，就不要对其使用下划线</u>socket <i>显示斜体文本效果</i>编程语言 <b>粗体文本</b>根据 HTML5 规范，在没有其余合适标签更合适时，才应该把 <b> 标签做为最后的选项 <strong>把文本定义为语气更强的强调的内容</strong> <s>删除文本</s>在HTML5中再也不支持，用<del>代替了上标2<sup>1</sup> 下标2<sub>1</sub>
排版标签	<h1>~<h6><p><div><span><br><hr>
超连接标签	<a>
图片标签	<img>

　　特殊字符：

&nbsp	空格
&lt	<
&gt	>
&qout	"
&apos	'

　　这些是最经常使用的。

　　须要了解的有：

&：符号&
©：版权©
™：商标™

　　其余字符参照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

a标签的用法

超连接:

返回顶部和返回底部:

链接到指定文件:

img标签的用法

p标签(段落标签)的用法

p标签自带行间距

div标签(段落标签)的用法

没有行间距,只是单纯的换行

span标签的用法

没有行间距,没有换行,只是单纯的空格

table标签的用法

表格标签也是很是经常使用的标签。

生活中的一个表格（table）是由行（tr）和（td）列组成的。

可是在前端中一个表格（table）是由行（tr）组成，行（tr）是由单元格（td）组成。

      
  
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td>大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr>
        <td>三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
      
  

这个时候咱们发现，这里的表格没有边框呀。别急，边框在表格的属性中能够设置。

table（表格）的属性：

border：边框单位是像素。

border-style:dotted solid double dashed; 点、线、双线、虚线

style="border-collapse:collapse;"：单元格的线与边框线合并。
width：宽度，单位是像素。
bordercolor：边框的颜色。
align：表格的水平对齐方式，属性值：left、right、center。
background：表格的背景图片。
bgcolor：表格的背景颜色。
cellpadding：单元格的文字距离四条边的距离，单位是像素，默认距离左边那条线的距离为0，若是想更改其默认距离右边的距离为0的话，设置属性dir="rtl"
cellspacing：单元格和单元格之间的距离，单位是像素，默认值为0。切记：若使用此属性，请删除 style="border-collapse:collapse;"。

带一些属性的代码及效果图：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >

表格的行 tr

咱们刚才说过前端中的表格（table）仅且只有行（tr）组成。

表格的行也具备本身的属性：

dir：决定此行单元格的排列方式，默认是从左到右（ltr），可更改成：从右到左（rtl）。
bgcolor：设置这一行的单元格的背景颜色。（tr没有background属性了，想要实现给这一行增长一个背景图片的效果，能够经过CSS来实现）。
height：行高。
align：本行水平对齐方式，能够是left、right、center
valign：本行的垂直对齐方式，能够是top、middle、bottom

表格的单元格 td

咱们刚才说过前段中行（tr）中是单元格（td），没有列的概念。

单元格也具备本身的属性：

width：宽，单位像素/百分比，例如width="50%"指此列的全部单元格占整张表的50%宽度。
height：高，单位像素/百分比，例如height="50%"指此行的全部单元格占整张表的50%高度。
align：水平对齐方式，能够是left、right、center。
valign：垂直对齐方式，能够是top、middle、bottom。
bgcolor：背景颜色。
background：背景图片。

合并单元格

excel中的合并单元格就是把多个单元格合并成一个，在前段中合并单元格也是这样的。

单元格合并能够从一下两个方向出发（单元格的属性）：

colspan：横向合并，例如colspan="2"表示此单元格水平方向上要占据两个单元格。
rowspan：纵向合并，例如rowspan="2"表示此单元格垂直方向上要占据两个单元格。

代码及效果展现：

      
  
<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
      
  

加粗版的单元格用th替代掉td便可（加粗的是单元格内的内容），其余属性与td同样，不需修改，且单元格内的内容会居中显示。

表格的<caption>、<thead>、<tbody>、<tfoot>

caption：表格的标题，与tr同级。

caption代码示例及效果：

      
  
<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <caption>葫芦兄弟信息表</caption>
    <tr>
        <th>姓名</th>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
      
  

thead、tbody、tfoot

thead：顾名思义，表格的头
tbody：顾名思义，表格的身子
tfoot：顾名思义，表格的脚

若是以这三个标签命名，在页面中渲染会先渲染thead，再渲染tbody，再渲染tfoot。

若是有重复的thead、tbody、tfoot的话，则按会按照先头再身子再脚的状况显示，多个头则按前后顺序显示头。

当表格内容很是大、很是多的时候，用thead、tbody、tfoot这种方式排版，数据就能够一边获取一边渲染，若是不，则等数据所有加载完再显示整个表格。

代码及效果演示：

      
  
<table border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8">
    <caption>葫芦兄弟信息表</caption>
    <tfoot>
    <td width="50%" height="50%">三娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>扎本身，撞本身</td>
    </tfoot>
    <thead>
    <th>姓名</th>
    <td>性别</td>
    <td>年龄</td>
    <td>爱好</td>
    </thead>
    <tbody>
    <td>二娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>听、看</td>
    </tbody>
    <tbody>
    <td colspan="2" rowspan="2">大娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>举重</td>
    </tbody>

</table>
      
  

表格标签也是很是经常使用的标签。

生活中的一个表格（table）是由行（tr）和（td）列组成的。

可是在前端中一个表格（table）是由行（tr）组成，行（tr）是由单元格（td）组成。

      
  
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td>大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr>
        <td>三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎本身，撞本身</td>
    </tr>
</table>
      
  

这个时候咱们发现，这里的表格没有边框呀。别急，边框在表格的属性中能够设置。

table（表格）的属性：

border：边框单位是像素。

border-style:dotted solid double dashed; 点、线、双线、虚线

style="border-collapse:collapse;"：单元格的线与边框线合并。
width：宽度，单位是像素。
bordercolor：边框的颜色。
align：表格的水平对齐方式，属性值：left、right、center。
background：表格的背景图片。
bgcolor：表格的背景颜色。
cellpadding：单元格的文字距离四条边的距离，单位是像素，默认距离左边那条线的距离为0，若是想更改其默认距离右边的距离为0的话，设置属性dir="rtl"
cellspacing：单元格和单元格之间的距离，单位是像素，默认值为0。切记：若使用此属性，请删除 style="border-collapse:collapse;"。

带一些属性的代码及效果图：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >

表格的行 tr

咱们刚才说过前端中的表格（table）仅且只有行（tr）组成。

表格的行也具备本身的属性：

dir：决定此行单元格的排列方式，默认是从左到右（ltr），可更改成：从右到左（rtl）。
bgcolor：设置这一行的单元格的背景颜色。（tr没有background属性了，想要实现给这一行增长一个背景图片的效果，能够经过CSS来实现）。
height：行高。
align：本行水平对齐方式，能够是left、right、center
valign：本行的垂直对齐方式，能够是top、middle、bottom

表格的单元格 td

咱们刚才说过前段中行（tr）中是单元格（td），没有列的概念。

单元格也具备本身的属性：

width：宽，单位像素/百分比，例如width="50%"指此列的全部单元格占整张表的50%宽度。
height：高，单位像素/百分比，例如height="50%"指此行的全部单元格占整张表的50%高度。
align：水平对齐方式，能够是left、right、center。
valign：垂直对齐方式，能够是top、middle、bottom。
bgcolor：背景颜色。
background：背景图片。

合并单元格

excel中的合并单元格就是把多个单元格合并成一个，在前段中合并单元格也是这样的。

单元格合并能够从一下两个方向出发（单元格的属性）：

colspan：横向合并，例如colspan="2"表示此单元格水平方向上要占据两个单元格。
rowspan：纵向合并，例如rowspan="2"表示此单元格垂直方向上要占据两个单元格。

代码及效果展现：

 
   
 单元格合并代码示例 

加粗版的单元格用th替代掉td便可（加粗的是单元格内的内容），其余属性与td同样，不需修改，且单元格内的内容会居中显示。

表格的<caption>、<thead>、<tbody>、<tfoot>

caption：表格的标题，与tr同级。

caption代码示例及效果：

 
   
 caption属性演示代码 

thead、tbody、tfoot

thead：顾名思义，表格的头
tbody：顾名思义，表格的身子
tfoot：顾名思义，表格的脚

若是以这三个标签命名，在页面中渲染会先渲染thead，再渲染tbody，再渲染tfoot。

若是有重复的thead、tbody、tfoot的话，则按会按照先头再身子再脚的状况显示，多个头则按前后顺序显示头。

当表格内容很是大、很是多的时候，用thead、tbody、tfoot这种方式排版，数据就能够一边获取一边渲染，若是不，则等数据所有加载完再显示整个表格。

代码及效果演示：

 
   
 thead、tbody、tfoot代码演示 

列表(ul,ol)标签的用法

ul无序列表

ul定义一个无序列表,经过type去改变无序列表的那个黑点,disc是实心黑点,默认是如此,square是方块,circle是空心圆.

li是列表中的每个元素

　　ol有序列表

ol定义一个有序列表,经过type去定义一个有序序号,能够是1,A,a,I,i,有序列表中start属性规定从哪一个序列号开始

li是列表中的一个元素

dl二级菜单

from表单的用法: 　　　

　　功能：

　　　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　　　表单可以包含input系列标签，好比文本字段、复选框、单选框、提交按钮等等。

　　　　表单还能够包含textarea、select、fieldset和 label标签。

　　表单属性

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

点击提交按钮，input中type=submit的那个按钮，而后就会将form表单中全部用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以咱们本身写的那个socket举例，打印一下接收的内容），可是全部的输入标签必须有一个叫作name的属性。