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. Spring Boot教程（三十三）使用Redis数据库（1）

    Spring Boot中除了对常用的关系型数据库提供了优秀的自动化支持之外,对于很多NoSQL数据库一样提供了自动化配置的支持,包括:Redis, MongoDB, Elasticsearch, So ...

  2. 2016 CCPC 长春站现场赛总结（流水账= =）

    总的来说在写这篇总结的时候心情还是愉悦的,因为第一次参加区域赛就越过铜直接拿了个银~开心之情无法用语言形容啊233= =... 从杭州坐火车到长春,去的时候24个小时,回来32个小时,在路上就花了2天 ...

  3. [CSP-S模拟测试]:C（三分+贪心）

    题目传送门(内部题46) 输入格式 第一行$3$个整数$n,m,t$.第二行$n$个整数,表示$P_i$.接下来$m$行每行两个整数,表示$L_i,R_i$. 输出格式 一行一个整数表示答案. 样例 ...

  4. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  5. linux 下载jdk

    1.官方下载jdk的地方 jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  6. rabbitMq实战使用

    只做下工作记录,比较重要的几个属性: concurrency:一个生产者可以同时由多少个消费者消费,这个一般根据你的机器性能来进行配置 prefetch:允许为每个consumer指定最大的unack ...

  7. LeetCode 109. 有序链表转换二叉搜索树（Convert Sorted List to Binary Search Tree）

    题目描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: ...

  8. 利用uniGUI中的TUniPageControl实现多页面

    远行效果: 实现代码: procedure TfrmMain.OpenForm(Caption,FormClassName:string);var  i:integer;  sheet:TUniTab ...

  9. SAX解析示例代码和原理

    import java.io.File; import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXParserFactory; ...

  10. IDEA Cannot access alimaven (http://maven.aliyun.com/nexus/content/groups/public/)

    [ERROR] Plugin org.apache.maven.plugins:maven-compiler-plugin:3.1 or one of its dependencies could n ...