博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端基础之html
阅读量:5819 次
发布时间:2019-06-18

本文共 3986 字,大约阅读时间需要 13 分钟。

一、初始html

1.web服务本质

import socketsock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)sock.bind(("127.0.0.1",8800))sock.listen(5)while 1:    print("waiting........")    conn,addr=sock.accept()    data=conn.recv(1024)    print("data",data.decode("utf8"))    with open("index.html","r") as f:        response=f.read()  #可以吧html放在一个文档里面读出来    conn.send(("HTTP/1.1 201 OK\r\n\r\n%s"%response).encode("utf8"))

2.html是什么?

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

3.html不是什么?

HTML 不是一种编程语言,而是一种标记语言 (markup language)

HTML 使用标记标签来描述网页

4.html结构

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题,在浏览器标题栏显示。 
  • <body></body>之间的文本是可见的网页主体内容

5.html标签格式

标签的语法:

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

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

二、常用标签

1.<!DOCTYPE>标签

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

 

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

document.compatMode:

 

  1. BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

 

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

2.<head>内常用标签

☞☞<meta>标签

1.meta介绍

<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。
<meta>提供的信息是用户不可见的

2.meta标签的组成:

meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

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

 

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

meta标签
和上面的是一样的,都是指定编码的

☞☞非<meta>标签

#加载css #加载js

3.<body>内常用标签

基本标签

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

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

: 为文字加上一条中线.
: 文字变成斜体.: 上角标 和 下角表.
:换行.


:水平线特殊字符: < >;";©®'''
1  2    《海燕练习哈》 3     

你好啊

4

你好啊

5

你好啊

6

你好啊

7
你好啊
8
你好啊
9 haiyan haiyan haiyan haiyan10

11 《静夜思》
12 床前明月光
13 疑是地上霜
14 举头望明月
15 低头思故乡16

17

《静夜思》

18

床前明月光

19

疑是地上霜

20

举头望明月

21

低头思故乡

22

23 点击百度24 zzzzzzzz25
常用标签练习

从上面的练习中总结:

标签的分类一:

  自闭合标签:单标签

  闭合标签:双标签

标签的分类二:

  块级标签:就是独占一行,可以自行设置宽高!如:先学到的 div,p,h1-h6

  内联标签:按内容占位,高度和广度是由自己的内容填充的 如: a,br,img

判断块级标签和内联标签的方法:

  1.是否独占一行(可以通过设置背景颜色去判断)

  2.是否可以单独为元素设置高度和宽度。

<div>和<span>

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

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

块级元素与行内元素的区别

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

 

图形标签: <img> 

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

 

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

什么是超级链接?所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
'''clickhref属性指定目标网页地址。该地址可以有几种类型:    绝对 URL - 指向另一个站点(比如 href="http://www.jd.com)    相对 URL - 指当前站点中确切的路径(href="index.htm")    锚 URL - 指向页面中的锚(href="#top")'''

 

列表标签

'''
    : 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
      : 有序列表
    1. :列表中的每一项.
      定义列表
      列表标题
      列表项'''

 

表格标签: <table>

表格概念

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

标题 标题
内容 内容

 

属性:

''': 表行: 表头:表数据属性:    border: 表格边框.    cellpadding: 内边距    cellspacing: 外边距.    width: 像素 百分比.(最好通过css来设置长宽)    rowspan:  单元格竖跨多少行    colspan:  单元格横跨多少列(即合并单元格)'''

 

转载地址:http://vnwdx.baihongyu.com/

你可能感兴趣的文章
Dropbox再曝泄密危机 亚信安全建议企业用户部署安全的私有云存储
查看>>
2016中国互联网+转型年度盛典 |30天后谁将现身广州塔
查看>>
Apache CouchDB 2.3.1 发布,文档型数据库
查看>>
看了极光推送技术原理的几点思考
查看>>
2018 年全球互联网十大数据泄露事件盘点
查看>>
layim的websocket消息撤回功能实现
查看>>
区块链太火,小心你的服务器被动挖矿!
查看>>
查看当前Java进程工具jps(转)
查看>>
django 1.8 官方文档翻译: 2-5-6 多数据库
查看>>
四,ESP8266 TCP服务器(基于Lua脚本语言)
查看>>
哈佛商业评论:关于区块链的真相
查看>>
linux中内存使用原理
查看>>
量子回路终于制成,量子计算机指日可待
查看>>
12 Open Source Projects by Alibaba – Part 1
查看>>
python【4】-函数
查看>>
调整窗口大小也能够实现div水平垂直居中代码实例
查看>>
PostgreSQL数据库 OLTP高并发请求性能优化
查看>>
联想2017TechWorld大会举行 联想未来瞄准AI
查看>>
出国就医不用慌,日本推出“医用语音翻译系统”
查看>>
ansible常用模块详解
查看>>