首页 > > 网页制作 > css >

HTML（上）

2019-10-12 08:16:28来源：博客园阅读 ()

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：

<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：姓名就写人名
-->

属性：