HTML(上)

目录

  • HTML(上)
    • 浏览器
    • HTML
      • 什么是HTML
      • HTML的作用
      • 编写HTML的规范
      • HTML结构
      • HTML常用标签
      • HTML标签速记

HTML(上)

浏览器

  • 浏览器也是一个客户端
#这是一个服务器,我们通过浏览器就可以访问的到服务器发送的"hello"
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen(5)
while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 ok\r\n\r\n")  #必须要加上这一句,不然浏览器不认识
    conn.send(b"hello")
    conn.close()
  • 浏览器不通过服务端也可以渲染文本

HTML

什么是HTML

HTML全称HyperText Markup Language,超文本标记语言,是一种描述性的标记语言。

  • 超文本:音频、视频、图片
  • 标记: 称为标记,一个HTML页面都是由各种标记组成。

HTML的作用

负责描述文档语义的语言

编写HTML的规范

1)所有标记元素都要正确的嵌套,不能交叉嵌套。eg:

2)所有标记都必须小写

3)所有标记都必须关闭

  • 双标签:
  • 单标签:

4)所有属性值必须加引号。eg:

5)所有属性必须有值:首页

HTML结构

用pycharm新建一个HTML文件,文件会自动生成如下代码的一个HTML模板








    
    
    Title
    





HTML常用标签

head内常用标签

基本标签
标签 意义
定义网页标题
定义内部样式表
定义JS代码或引入外部JS文件
引入外部样式表文件
定义网页原信息
meta标签











                                             

body内常用标签

基本标签
加粗
斜体
下划线
删除

段落标签,写在这个标签内的东西就是一个段落

1号标题

2号标题

3号标题

4号标题

5号标题
6号标题


特殊字符
 


>


<


&


¥


©


®

div标签和span标签
div标签:
span标签: **块级标签与内联标签的区别** 块级标签:另起一行开始渲染元素 内联标签:不需要另起一行 如果单独在网页中插入这两个元素,不会对页面产生任何的影响,他们是专门为定义CSS样式而生的

注意:

​ 块级标签可以嵌套内联标签或者某些块级标签

​ 内联标签不能嵌套块级标签

​ ==p标签不能嵌套块级标签,也不能嵌套p标签==

img标签
图片未加载成功时的提示
故宫
a标签

a标签又叫做超链接标签

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

我们就先拿另一个网页举例

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

绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL - 指向页面中的锚(href="#top")
点我会跳转哦!



点我会跳转哦!



点我会跳转哦!



点我回到加粗



点我转到这个网页哦!
列表
无序列表
    • 第一项
    • 第二项
    • 第三项

    type属性:

    • type="disc"(实心圆点,默认值)
    • type="circle"(空心圆圈)
    • type="square"(实心方块)
    • type="none"(无样式)
    有序列表
      1. 第一项
      2. 第二项
      3. 第三项

      type属性:

      • 1 数字列表,默认值
      • A 大写字母
      • a 小写字母
      • Ⅰ大写罗马
      • ⅰ小写罗马

      start属性:

      start="3"只能写数字,表示从第3个开始

      标题列表
      标题1
      内容
      标题2
      内容1
      内容2
      表格
      序号 姓名 爱好
      1 yjy 跳舞
      2 wwb 唱歌

      属性:

      • border: 表格边框 eg:border="6"
      • cellpadding: 内边距 eg:cellpadding="8"
      • cellspacing: 外边距 eg:cellspacing="2"
      • width: 像素 百分比 eg:width="100%"

      以上这些属性要在

      中设置

      • rowspan: 单元格竖跨多少行(上下合并单元格) eg:rowspan="3"
      • colspan: 单元格横跨多少列(左右合并单元格) eg:colspan="2"

      以上这些属性要在

      中设置

      HTML标签速记

      块级标签

      标题 h1 h2 h3 h4 h5 h6
      列表 ul ol li dl dt dd
      排版标签 p div hr center pre
      表格 table
      表单 form

      内联标签

      字体 b i sup sub u
      排版 span br
      超链接 a
      图片 img

      补充

      • 文本级标签:p、span、a、b、i、u、em。
      • 容器级标签:div、h系列、li、dt、dd

      你可能感兴趣的:(HTML(上))