day42 前端-html入门

Html

自己实现一个服务端

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

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>

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

<head>内常用标签

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

<meta>

　　meta简介:

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

　　meta的两个属性：

　　

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

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

 

 <body> 内常用标签

　　基本标签:

　　

字体标签

<font>不赞成使用，html5中已经废弃此标签</font>

<u>如果文本不是超链接，就不要对其使用下划线</u>

<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 '

　　这些是最常用的。

　　需要了解的有：

  • &amp;：符号&
  • &copy;：版权©
  • &trade;：商标™

　　其他字符参照表：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的属性。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-03-12 16:27  jack_zhangn`  阅读(177)  评论(0)  编辑  收藏  举报