HTML基础-DAY1

HTML基础

Web的本质就是利用浏览器访问socket服务端，socket服务端收到请求回复数据提供给浏览器进行渲染显示。

import socket

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost',8081))    #通过浏览器访问该绑定端口

    sock.listen(5)

    while True:

        print("server is working.....")

        conn, address = sock.accept()

        request = conn.recv(1024)

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello world</h1>","utf8"))    #服务端返回数据给浏览器渲染显示，注意头部信息：版本号和状态码

        conn.close()

if __name__ == '__main__':

    main()

超文本标记语言（Hypertext Markup Language，HTML）是一门标记语言，并不是编程语言，该语言通过浏览器能识别的规则标签来标记要显示的网页中的各个部分。浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。

静态网页文件扩展名：.html 或 .htm

HTML结构

<!DOCTYPE html>     #告诉浏览器使用什么标记语言解释，如html、html5、xhtml等

<html lang="en">    #Html文件声明的开始

<head>  #文件开头部分，里面的元素不会显示在页面中，但是每一个元素都有特殊的含义

    <meta charset="UTF-8">

    <title>Title</title>    #网页的标题

</head>

<body>

    #文件主体部分

</body>

</html>     #Html文件声明的结束

HTML标签格式

标签的语法

闭合标签：　　<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

自闭合标签：　<标签名属性1=“属性值1” 属性2=“属性值2”…… />

<!DOCTYPE>标签

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。声明文档的解析类型，避免浏览器的怪异模式。

BackCompat：怪异模式，浏览器使用自己的默认的模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么渲染模式默认就是BackCompat

示例：设置为html

<!DOCTYPE html>

head内常用标签

meta标签

meta标签的组成：http-equiv属性和name 属性。

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

#汽车之家首页源码

<meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>    #搜索引擎搜索的关键字

<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>    #搜索的说明信息

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

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> #打开该html文件，两秒后转到百度

<meta http-equiv="content-Type" charset=UTF8">    #设置文本类型和编码

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />     #声明渲染浏览器，开发者无需考虑ie8的差别

非meta标签

<title>我的第一个网站</title>    #标题信息

<link rel="icon" href="http://www.jd.com/favicon.ico">    #标题的图标

<link rel="stylesheet" href="css.css">    #导入css样式文件

<script src="hello.js"></script>　    #导入js脚本

body内常用标签

基本标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：

      &lt; &gt；&quot；&copy;&reg;

html特殊符号

<div>和<span>标签

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与内联元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

标签嵌套标准：块级标签可以嵌套内联标签和块级标签，内联标签只能嵌套内联标签

<img> 标签

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<a>超链接标签(锚标签)

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

什么是URL？

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例

http://www.sohu.com/stu/intro.html

http://222.172.123.33/stu/intro.html

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

URL介绍

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）

    相对 URL - 指当前站点中确切的路径（href="index.htm"）

    锚 URL - 指向页面中的锚（href="#top"）

列表标签

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表

         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题

         <dd> 列表项

<table>表格标签

表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

#表格的基本结构

<table>

         <tr>    #行

                <td>标题</td>    #列

                <td>标题</td>

         </tr>

         <tr>

                <td>内容</td>    #列

                <td>内容</td>

         </tr>

</table>

#表格属性

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

表格练习

    <table width="">

        <tr>

            <th>课程表</th>

        </tr>

    </table>

    <table border="" cellspacing="" cellpadding="">

        <tr>

            <th>项目</th>

            <th colspan="">上课</th>

            <th colspan="">休息</th>

        </tr>

        <tr>

            <th>星期</th>

            <th>星期一</th>

            <th>星期二</th>

            <th>星期三</th>

            <th>星期四</th>

            <th>星期五</th>

            <th>星期六</th>

            <th>星期日</th>

        </tr>

        <tr>

            <td  rowspan="">上午</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td rowspan="">休息</td>

        </tr>

        <tr>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

        </tr>

        <tr>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

        </tr>

        <tr>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

        </tr>

        <tr>

            <td  rowspan="">下午</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td rowspan="">休息</td>

        </tr>

        <tr>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

            <td>课程</td>

        </tr>

    </table>

课程表

   <table  border=""  cellpadding="" cellspacing="">

        <tr>

            <th colspan="">星期一菜谱</th>

        </tr>

        <tr>

            <td rowspan="">素菜</td>

            <td>青草茄子</td>

            <td>花椒扁豆</td>

        </tr>

        <tr>

            <td>小葱豆腐</td>

            <td>炒白菜</td>

        </tr>

        <tr>

            <td rowspan="">荤菜</td>

            <td>油焖大虾</td>

            <td>海参鱼翅</td>

        </tr>

        <tr>

            <td>红烧肉<img src="http://xt.fangyuan365.com/uploadfiles/image/20160116/20160116090876957695.jpg" alt="aaa"></td>

            <td>烤全羊</td>

        </tr>

    </table>

菜谱

HTML基础-DAY1的更多相关文章

计算机基础-Day1
计算机基础-Day1 一.计算机基础首先Python是一门编程语言语言: 那什么是语言?语言就是一种事物与另一种事物沟通的介质. 所以说编程语言是程序员跟计算机沟通的介质,那么为什么要跟计算机沟通 ...
python计算机基础-Day1
计算机基础-Day1 一.计算机基础首先Python是一门编程语言语言: 那什么是语言?语言就是一种事物与另一种事物沟通的介质. 所以说编程语言是程序员跟计算机沟通的介质,那么为什么要跟计算机沟通 ...
IOS基础 Day-1手动内存管理
辞职回家打算自学IOS开发,就在借个地方记录一下 Day-1 手动内存管理主要内容:release retain必须配对好,不然会占用内存慢慢积累导 ...
python基础day1
一．python介绍 1.1简介 Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum ...
java基础-day1
第01天 java基础知识今日内容介绍 u Java概述.helloworld案例 u 工具安装 .配置环境变量.注释.关键字 u 常量.变量.数据类型.标识符第1章 Java概述 1.1 ...
JQuery基础-DAY1
jQuery介绍是一个轻量级的js框架/库,其宗旨是write less do more. jQuery对象 js的对象叫做dom对象使用jQuery框架产生的对象是jQuery对象,是对dom对 ...
Python基础Day1—上
一.计算机基础 CPU:中央处理器,相当于人的大脑:运算中心与控制中心的结合. 内存:临时存储数据,与CPU交互. 硬盘:永久存储数据. 内存的优点:读取速度快内存的缺点:容量小,造价高,断电数据会 ...
python基础 Day1
Python开发笔记 Day1 1.cpu内存硬盘操作系统 cpu:计算机的运算和计算中心,相当于人类大脑内存:暂时存储数据,临时加载数据应用程序,4G(内存速度快,断电即消失) 硬盘:磁盘,长 ...
百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

随机推荐

CF 1008C Reorder the Array
You are given an array of integers. Vasya can permute (change order) its integers. He wants to do it ...
【CC2530强化实训02】普通延时函数实现按键的长按与短按
[CC2530强化实训02]普通延时函数实现按键的长按与短按 [题目要求] 用一个按键实现单击与双击的功能已经是很多嵌入式产品的常用手法.使用定时器的间隔定时来计算按键按下的时间是通用的做法 ...
Python练习-基于授权方式包装list之与根儿哥必有一战
# 编辑者:闫龙 # 基于授权定制自己的列表类型,要求定制的自己的__init__方法, # 定制自己的append:只能向列表加入字符串类型的值 # 定制显示列表中间那个值的属性(提示:proper ...
Integer to Roman & Roman to Integer
Integer to Roman Given an integer, convert it to a roman numeral. The number is guaranteed to be wit ...
十九、springboot使用@ControllerAdvice（二）之深入理解
前言: 接口类项目开发时,为了便于后期查找问题,一般会拦截器或过滤器中记录每个接口请求的参数与响应值记录, 请求参数很容易从request中获取,但controller的返回值无法从response中 ...
spring 学习之二 AOP编程
AOP概念 AOP, aspect oriented programing,翻译过来就是面向切面编程的意思,那什么叫面向切面编程呢?相对于之前传统的纵向继承方式来对原有功能进行功能扩展, 面向切面编程 ...
数据库-mysql中文显示问题
一:在mysql 下面查看带中文的记录显示乱码 mysql> select * from role; +----+------+ | id | name | +----+------+ | 1 ...
R语言以及RStdio的安装
R语言: 首先从官网上下载R安装包, 提供了Linux, (Mac) OS X, Windows的安装包相关下载链接. RStdio: RStdio(官网)是R言语非常实用的IDE, 是一个免费的软件 ...
【Android开发日记】之入门篇（五）——Android四大组件之Service
这几天忙着驾校考试,连电脑都碰不到了,今天总算告一段落了~~Service作为Android的服务组件,默默地在后台为整个程序服务,辅助应用与系统中的其他组件或系统服务进行沟通.它跟Activity的 ...
Java 泛型和类型安全的容器
使用java SE5之前的容器的一个主要问题就是编译器允许你向容器插入不正确的类型,例如: //: holding/ApplesAndOrangesWithoutGenerics.java // Si ...

HTML基础-DAY1

<div>和<span>标签

<img> 标签

HTML基础-DAY1的更多相关文章

随机推荐

热门专题