一.HTML初识

1.web服务本质

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 Yuan</h1>","utf8"))
conn.close() if __name__ == '__main__': main()

2.html是什么?

  • 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则
  • 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)
  • 静态网页文件扩展名:.html 或 .htm

3.html不是什么?

HTML 不是一种编程语言,而是一种标记语言 (markup language)
HTML 使用标记标签来描述网页

4.html结构

5.html标签格式

标签的语法:

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

二.常用标签

<!DOCTYPE>标签

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

<head>内常用标签

<meta>标签

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

<body>内常用标签

基本标签(块级标签和内联标签

'''
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符:
&lt; &gt;&quot;&copy;&reg; '''

<div>和<span>

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

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

图形标签: <img>

'''
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) '''

超链接标签(锚标签): <a> </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>
'''

<tr>: table row

<th>: table head cell

<td>: table data cell

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

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

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列(即合并单元格)

'''

练习:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body> <table border="1px" cellpadding="10" cellspacing="3" style="border-color:red">
<caption style="text-algin:center">课程表</caption>
<tr>
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr> <tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr> <tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</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="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr> <tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td> </tr> </table> </body>
</html>

课程表

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜谱</title>
</head>
<body> <table border="1px" cellpadding="10px" cellspacing="0px" style="border-color:blue">
<tr>
<th colspan="">星期一菜谱</th>
</tr> <tr>
<td rowspan="">素菜</td>
<td colspan="">青草茄子</td>
<td>小葱豆腐</td> </tr>
<tr>
<td colspan="">花椒扁豆</td>
<td>炒大白菜</td>
</tr> <tr>
<td rowspan="">荤菜</td>
<td colspan="">油焖大虾</td>
<td >红烧肉</td>
</tr> <tr>
<td colspan=""><a href="课程表.html"><img src="2.jpg" alt="">海参鱼翅</a></td>
<td>烤全羊</td>
</tr> </table> </body>
</html>

菜谱

HTML初识(Day46)的更多相关文章

  1. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  2. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  3. python学习笔记(基础四:模块初识、pyc和PyCodeObject是什么)

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  4. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  5. UI篇(初识君面)

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  6. Python导出Excel为Lua/Json/Xml实例教程(一):初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  7. 初识SpringMvc

    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...

  8. 初识redis数据类型

    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...

  9. Redis初识、设计思想与一些学习资源推荐

    一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...

随机推荐

  1. 小型web服务器thttpd的学习总结(上)

    1.软件的主要架构 软件的文件布局比较清晰,主要分为6个模块,主模块是thttpd.c文件,这个文件中包含了web server的主要逻辑,并调用了其他模块的函数.其他的5个模块都是单一的功能模块,之 ...

  2. Scala学习笔记(一)编程基础

    强烈推荐参考该课程:http://www.runoob.com/scala/scala-tutorial.html 1.   Scala概述 1.1.  什么是Scala Scala是一种多范式的编程 ...

  3. 6:7 题一起MySQL数据库分库备份

    企业Shell面试题6:MySQL数据库分表备份 请实现对MySQL数据库进行分表备份,用脚本实现. 解答: [root@db01 scripts]# cat fenbiao.sh #!/bin/ba ...

  4. MongoDB 连接数高产生原因及解决

    MongoDB Sharding架构下连接数很容易达到很高,这里连接数分为几个概念:tcp 连接数 netstat可以统计的,一般这个是最高.如果mongod/mongos在同一台服务器,更明显.参考 ...

  5. GAN网络

    http://www.sohu.com/a/130252639_473283 高分辨率图像重建 https://zhuanlan.zhihu.com/p/25201511 生成式对抗网络GAN有哪些最 ...

  6. .net mvc 下实现移动架构display mode

    最近要求做支持移动端网站 我们的设计已经把移动端UI给我了,但是我还没想好改用哪种方式支持移动端 1.常见的就是2级域名m.baidu.com,框架根据访问者设备,来选择是否跳转到移动站 2.同域名的 ...

  7. Java容器:HashMap和HashSet解析

    转载请注明出处:jiq•钦's technical Blog 一.HashMap HashMap,基于散列(哈希表)存储"Key-Value"对象引用的数据结构. 存入的键必须具备 ...

  8. 学习DBCC CHECKIDENT

    检查指定表的当前标识值,如有必要,还对标识值进行更正. 语法DBCC CHECKIDENT    ( 'table_name'        [ , { NORESEED                ...

  9. Amazon Virtual Private Cloud(虚拟专有网络)官方文档通读

    一.什么是Amazon VPC? 参考资料: 官网文档 https://docs.aws.amazon.com/zh_cn/AmazonVPC/latest/UserGuide/VPC_Introdu ...

  10. 【C语言天天练(二)】预处理

    引言: 学C语言之初.一提到预处理,脑子里想到的就是#define的宏定义以及#include包括的头文件.后来随着对C的深入学习发现.预处理不止这些.比方条件编译.提前定义的宏等等.以下对此进行总结 ...