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：

<h1><a></a></h1>

2）所有标记都必须小写

3）所有标记都必须关闭

  • 双标签：<h></h1>
  • 单标签：<img src=“URL” />

4）所有属性值必须加引号。eg：<h1 id="head"></h1>

5）所有属性必须有值：<a href="02.html" target="_blank">首页</a>

HTML结构

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

<!DOCTYPE html>

<!--文档声明头，告诉浏览器它应该用什么版本的html去解析以下代码-->

<html lang="en">

<!--文档的开始标记和结束标记，lang="en"表示用英语或者其他国家的语言，在它们之间是文档的头部（head）和主体（body）-->

<head>

<!--定义了HTML文档的开头部分，不会再浏览器的文档窗口显示-->

    <meta charset="UTF-8">

    <!--HTML的编码格式-->

    <title>Title</title>

    <!--网页标题，在浏览器标题栏显示-->

</head>

<body>

<!--文本主体，他们之间的文本是可见的网页主题内容-->

</body>

</html>

HTML常用标签

head内常用标签

基本标签
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
meta标签
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">

<!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<!--对网页并没有什么影响，就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->

<meta name="description" content="老男孩教育Python学院">

<!--这个也没有什么影响，就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->

<meta http-equiv="content-Type" charset=UTF8">

<!--指定文档的编码类型-->

<meta http-equiv="x-ua-compatible" content="IE = edge">

<!--告诉IE以最高级模式渲染文档-->

body内常用标签

基本标签
<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签，写在这个标签内的东西就是一个段落</p>

<h1>1号标题</h1>

<h2>2号标题</h2>

<h3>3号标题</h3>

<h4>4号标题</h4>

<h5>5号标题</h5>

<h6>6号标题</h6>

<br>

<!--这是一个换行标签-->

<hr>

<!--这是一个水平线标签-->
特殊字符
&nbsp;

<!--空格-->

&gt;

<!--大于号(>)-->

&lt;

<!--小于号(<)-->

&amp;

<!--&符号-->

&yen;

<!--人民币(￥)符号-->

&copy;

<!--版权符号-->

&reg;

<!--注册符号-->
div标签和span标签
div标签:

<div>

    <!--块级标签，无意义，通过CSS样式为其赋予不同的表现-->

</div>

span标签:

<span>

    <!--内联标签，无意义，通过CSS样式为其赋予不同的表现-->

</span>

**块级标签与内联标签的区别**

块级标签：另起一行开始渲染元素

内联标签：不需要另起一行

如果单独在网页中插入这两个元素，不会对页面产生任何的影响，他们是专门为定义CSS样式而生的

注意：

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

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

​ p标签不能嵌套块级标签，也不能嵌套p标签

img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息">

<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宫" title="美丽的故宫" >
a标签

a标签又叫做超链接标签

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

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

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

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

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

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


<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦！</a>

<!--target="_blank"表示重新打开一个网页进行跳转-->

<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦！</a>

<!--target="_self"表示就在当前网页进行跳转-->

<a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦！</a>

<!--默认target="_self"-->

<a href="#b1">点我回到加粗</a>

<!--b1是id属性，#b1表示回到id属性为b1的这个位置，这个位置就是<b id = "b1">加粗</b> -->

<a href="body内常用标签.html">点我转到这个网页哦！</a>

<!--他会跳到 body内常用标签.html 网页-->
列表
无序列表<ul></ul>
<ul type="disc">

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ul>

type属性：

  • type="disc"(实心圆点，默认值)
  • type="circle"(空心圆圈)
  • type="square"(实心方块)
  • type="none"(无样式)
有序列表<ol></ol>
<ol type="1" start="3">

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ol>

type属性：

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

start属性：

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

标题列表<dl></dl>
<dl>

    <dt>标题1</dt>

        <dd>内容</dd>

    <dt>标题2</dt>

        <dd>内容1</dd>

        <dd>内容2</dd>

</dl>
表格
<table>

    <thead>

    <tr>

        <th>序号</th>

        <th>姓名</th>

        <th>爱好</th>

    </tr>

    </thead>

    <tr>

        <td>1</td>

        <td>yjy</td>

        <td>跳舞</td>

    </tr>

     <tr>

        <td>2</td>

        <td>wwb</td>

        <td>唱歌</td>

    </tr>

</table>

<!--

看到 <table> 就说明接下来是一个表格

<thead>是表格的表头

<tr>表示一行，而在这一行中又有<th>

<th>表示表头的内容，表示整个一列的属性，eg：姓名

同理<tr>中的<td>就表示表格内容，按照<th>的要求写就行了，eg：姓名就写人名

-->

属性：

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

以上这些属性要在<table>中设置

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

以上这些属性要在<td>中设置

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（上）的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. [APUE]进程控制(上)

    一.进程标识 进程ID 0是调度进程,常常被称为交换进程(swapper).该进程并不执行任何磁盘上的程序--它是内核的一部分,因此也被称为系统进程.进程ID 1是init进程,在自举(bootstr ...

  3. 关于解决python线上问题的几种有效技术

    工作后好久没上博客园了,虽然不是很忙,但也没学生时代闲了.今天上博客园,发现好多的文章都是年终总结,想想是不是自己也应该总结下,不过现在还没想好,等想好了再写吧.今天写写自己在工作后用到的技术干货,争 ...

  4. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

  5. 深入浅出Redis-redis底层数据结构（上）

    1.概述 相信使用过Redis 的各位同学都很清楚,Redis 是一个基于键值对(key-value)的分布式存储系统,与Memcached类似,却优于Memcached的一个高性能的key-valu ...

  6. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  7. 在传统.NET Framework 上运行ASP.NET Core项目

    新的项目我们想用ASP.NET Core来开发,但是苦于我们历史的遗产很多,比如<使用 JavaScriptService 在.NET Core 里实现DES加密算法>,我们要估计等到.N ...

  8. .NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布

    众所周知,Red Hat和微软正在努力使.NET Core成为Red Hat企业版Linux (RHEL)系统上的一流开发平台选项.这个团队已经一起工作好几个月了,RHEL对.NET有许多需求.今天在 ...

  9. Windows 7上执行Cake 报错原因是Powershell 版本问题

    在Windows 7 SP1 电脑上执行Cake的的例子 http://cakebuild.net/docs/tutorials/getting-started ,运行./Build.ps1 报下面的 ...

  10. 【AutoMapper官方文档】DTO与Domin Model相互转换（上）

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

随机推荐

  1. TNS-12560: TNS: 协议适配器错误

    TNS-12560: TNS: 协议适配器错误   Microsoft Windows [版本 5.2.3790] (C) 版权所有 1985-2003 Microsoft Corp. C:\Docu ...

  2. Ansible常用模块之命令类模块

    Command模块 在远程节点上执行命令 [root@tiandong ~]# ansible all -m command -a "ls" 在远程主机上执行ls命令. [root ...

  3. fastjson =< 1.2.47 反序列化漏洞浅析

    fastjson =< 1.2.47 反序列化漏洞浅析 iiusky 洛米唯熊 今天 文章出处: https://www.03sec.com/3240.shtmlhttps://www.secq ...

  4. [CSP-S模拟测试]:那一天她里我而去（堆优化Dijkstra）

    题目传送门(内部题3) 输入格式 每个测试点有多组测试数据.第一行有一个正整数T表示数据组数.接下来对于每组数据,第一行有两个正整数n,m分别代表图的点数和边数.接下来有m行,每行三个整数u,v,d表 ...

  5. CLOB、BLOB ， CLOB与BLOB的区别

    CLOB 定义 数据库中的一种保存文件所使用的类型. Character Large Object SQL 类型 CLOB 在 JavaTM 编程语言中的映射关系.SQL CLOB 是内置类型,它将字 ...

  6. Java从string数组创建临时文件

    //从string数组创建临时文件 private static File createSampleFile(String[] strs) throws IOException { File file ...

  7. 尚学堂requireJs课程---1、作用域回顾

    尚学堂requireJs课程---1.作用域回顾 一.总结 一句话总结: 尚学堂的课程的资料他的官网上面是有的 1.js作用域? ~ js中是函数作用域:局部变量的话要写var关键词 ~ 闭包可以解决 ...

  8. vue图片的处理技巧

    我们想用 post 向后台发送字符串类型的数据:我们可以不适用 data 来进行数据传输,而是用 params 来进行数据传输 代码的简洁之道:分模块化书写: vue 里面提供对图片的监听事件:loa ...

  9. ACCESS_ONCE的作用

    如果你看过 Linux 内核中的 RCU 的实现,你应该注意到了这个叫做 ACCESS_ONCE() 宏. ACCESS_ONCE的定义如下: #define __ACCESS_ONCE(x) ({ ...

  10. LC 877. Stone Game

    Alex and Lee play a game with piles of stones.  There are an even number of piles arranged in a row, ...