html 初识 文档结构 常用标签
HTML初识
△HTML:
超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm(没有区别)
网页文件的扩展名:.html或.htm(没有区别)
我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm(没有区别)
△css:
层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言
JavaScript:
简称“JS”,是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
△jQuery:
jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码
△boodstarp(JQ+css):
bootstrap:简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
△B/S (前端/后端)
Web服务的本质:
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->
服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端,默认TCP链接
△浏览器自带socket客户端,自己编写的服务端也可以为浏览器服务
from socket import *
jd_server = socket()
jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()
按照HTTP协议加载浏览器能看懂的数据:
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")
HTTP/1.1 200 OK:
HTTP/1.1 是一个规范
200 代表请求成功
OK 表示一切正常
conn.send(b"<h1>nihao</h1>") #用标题包裹数据,更好看一些
标签一般形成一个结构写在文件里,这个文件就是HTML文件
HTTP/1.1 是一个规范
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")
pycharm中创建一个html文件(英文名,不要空格)
你会发现,整个结构都直接生成好了,因为不管什么浏览器,文档结构都是这样的
html文件可以在pycharm中就能打开
△自己写一个服务器
当浏览器来连服务器时,把HTML文件发送给浏览器
from socket import *
s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")
with open("test.html","rb") as f:
data = f.read()
new_s.send(data)
new_s.close()
s.close()
HTML文档结构
△最基本的HTML文档:
<!DOCTYPE html>
<html lang="zh-CN">
<!--这个lang表示语言,zh-CN是中文的意思,就是说,你整个文档的内容以中文为主-->
<!--如果以英文为主,就写成lang='en',用谷歌之类打开,它会认为是英文的,自动给翻译(如果设置了自动翻译的话)-->
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:HTML文件声明,声明为HTML5文档
<html>、</html>:是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)
<head>、</head>:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的
<title>、</title>:定义了网页标题,在浏览器标题栏显示
<body>、</body>:之间的文本是可见的网页主体内容
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码
有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">
△浏览器页面调试工具 F12
Elements(元素):对浏览器看来,所有标签都是元素
标签对文本进行了标记,所以HTML叫超文本标记语言
浏览器有识别标签的机制
HTML标签格式
标签分类定义
块级/内联:判断依据为显示的web中独占至少一行的body中的标签
块级标签(行外标签,独占一行):
块级标签能够包含内联标签,和某些块级标
<h1>一级标题</h1> 标题标签
<br> 换行标签
<hr> 换行横线标签
<p> 段落标签
第一章内容
</p>
<div style="color:green"> </div> 换行文档分区标签
<ul> 无序列表标签
<li>茶</li> 列表内容标签
</ul>
<ol type="I" start="2"> 有序列表标签
li>梅</li>
</ol>
<dl> 无标识标签
<dt>河北省</dt>
<dd>邯郸</dd>
</dl>
<table border="1"> 表格线框宽度 表格标签
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
内联标签(行内标签,不独占一行):
不能包含块级标签
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签
<a href="">跳到底部</a> 超链接标签
<span style="color:blue">蓝色</span> 文档标签
全封闭标签:
<title>网头</title> 网头标签
<h1>一级标题</h1> 标题标签
<a href="">跳到底部</a> 超链接标签
<p>我的车是 <span style="color:blue">蓝色</span> 的。</p> 段落标签 文档分区标签
<div style="color:green"> </div> 换行文档分区标签
<p> 段落标签
第一章内容
</p>
<ul> 无序列表标签
<li>茶</li>
</ul>
<ol type="I" start="2"> 有序列表标签
li>梅</li>
</ol>
<dl> 无标识标签
<dt>河北省</dt>
<dd>邯郸</dd>
</dl>
<table border="1"> 表格线框宽度 表格标签
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
自封闭标签:
<meta> 元信息标签
<link rel="icon" href="图标文件路径"> 网头图标标签
<br> 换行标签
<hr> 换行横线标签
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签
head内常用标签(了解):
<meta />
标签 元信息
用处:标签位于文档的头部,提供的信息是用户不可见的,是一个自封闭标签,全封闭标签,可提供有关页面的元信息(meta-information)
有一下关键字:
charset=
ontent="3"
定义文档字符编码和更新频度的描述:
<meta charset="utf-8" content="3"/>
三秒刷新
<meta http-equiv="Refresh" content="2;url=https://www.baidu.com"/>
自动跳转
http-equiv=
浏览器内核(渲染引擎):渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因,大部分渲染效果差不多
<meta http-equiv="Refresh">
<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比较个色
name="keyword" content="搜索关键字"
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类
<meta name="keywod" content="古风,武侠,悟道"/>
name="description" content="网站描述信息"
设置网站描述信息,用于在搜索引擎搜索时,显示网站基本描述信息
<meta name="description" content="这是一个古风网站"/>
触屏缩放
name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
device-width:设备宽度
- initial-scale=1.0,初始显示缩放比例。
- minimum-scale=0.5,最小缩放比例。
- maximum-scale=1.0,最大缩放比例。
- user-scalable=yes,是否支持可缩放比例(触屏缩放)
<title>网头</title>
标签
link 标签 网头图标
<link rel="icon" href="图标文件路径"/>
body内常用标签
<h1> <h1>
标签 标题
<body>
hehe #body中没有包裹的就是普通文本显示
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题,大圣</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
br标签 换行
<h1>123</h1>
<br>
<h2>4<br>5</h2>
123
4
5
注意点:直接回车、空格等空白内容都被认为是一个空格
hr 标签 一行横线
<h2>1<hr>2</h2>
1
----------------------------------
2
a 标签 超链接
锚点:页面内容进行跳转(在自己的页面跳)
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<h1 id="i1">第一章 XXX</h1>
<p> #段落标签
第一章内容
</p>
不加href属性,就是普通文本显示
<a>古风</a>
加上href属性,不加值文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面
<a href="# ">跳到底部</a>
加上href属性,并且加上值
<a href="http://www.baidu.com" target="_self" >baidu</a>
跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址
p标签 段落
<p>
第一章内容
</p>
span标签 文档分区
<p>我的车是 <span style="color:blue">蓝色</span> 的。</p>
如果不对 div和span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异
div标签 换行文档分区
div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分
<div style="color:green"> #字体为绿色
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<div style="background: red">内容</div> #背景为绿色
ul标签 无序列表
兴趣爱好:
<ul> #<ul>作为无序列表的声明
<li>茶</li>
<li>酒</li>
<li>棋</li>
</ul>
ol标签 有序列表
君子:
<ol type="I" start="2"> #<ol> 标签定义有序列表,有序列表的各个列表项有先后顺序,
<li>梅</li> #所以会使用数字进行标识
<li>兰</li>
<li>竹</li>
<li>菊</li>
</ol>
dl标签 无标识表
<dl>
<dt>河北省</dt> 表头
<dd>邯郸</dd> 内容
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
河北省
邯郸
石家庄
山西省
太原
平遥
tble标签 表格
<table border="1"> 表格线框宽度
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元
border:规定表格边框的宽度
img标签 图片
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"/>
src属性:图片路径 必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容
# 不常用,通过css来控制
width:设置宽度
height:设置高度
html 初识 文档结构 常用标签的更多相关文章
- HTML5的文档结构和新增标签
一.HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
- WEB笔记-1、HTML 标记与文档结构
1.HTML 标记与文档结构 1.1 块级(block)和行内(inline)标签 块级标签 <h1>-<h6> : 6级标签,h1表示最重要(h1 不仅仅是最大最突出 ...
- HTML的文档结构与语法(一)
一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...
- HTML5的文档结构
HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性 1. header 元素 <header> 标签定义文档或者文档 ...
- HTML文档结构
下面对HTML文档结构进行一 一解释: 1.文档声明:既不是元素,也不是注释: 代码格式:<! DOCTYPE html> 注:必须写在HTML文档的第一行 原因:告诉浏览器使用哪个版本的 ...
- HTML的概念和三大基石以及标准文档结构
HTML的概念: 概念: HTML:超文本标记语言 作用: 需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户. 在浏览器中数据需要使用友好的格式展示给用户. HTML是告诉浏 ...
- 4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
- 重温CSS之文档结构
我们来看看几个基本的HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- XML 文档结构必须从头至尾包含在同一个实体内
XML 文档结构必须从头至尾包含在同一个实体内 CreateTime--2018年4月2日16:40:58 Author:Marydon 问题还原: <![CDATA[ <?xml v ...
随机推荐
- Appium(七):Appium API(一) 应用操作
1. 应用操作 本章所罗列的方法主要针对应用的操作,如应用的安装.卸载.关闭.启动等. 把前面的启动代码放在这里,后面只展示不同的部分. # coding:utf-8 from appium impo ...
- 写完代码就去吃饺子|The 10th Henan Polytechnic University Programming Contest
河南理工大学第十届校赛 很久没有组队打比赛了,好吧应该说很久没有写题了, 三个人一起玩果然比一个人玩有趣多了... 前100分钟过了4题,中途挂机100分钟也不知道什么原因,可能是因为到饭点太饿了?, ...
- Paper | MFQE 2.0: A New Approach for Multi-frame Quality Enhancement on Compressed Video
目录 1. 要点 2. 压缩视频特性分析 2.1 质量波动 2.2 帧间相关性 3. 方法 3.1 分类器 3.2 好帧运动补偿 3.3 质量增强网络 4. 实验 4.1 差帧质量提升效果 4.2 总 ...
- 面试连环炮系列(七):HashMap的put操作做了什么
HashMap的put操作做了什么? HashMap的是由数组和链表构成的,JDK7之后加入了红黑树处理哈希冲突.put操作的步骤是这样的: 根据key值计算出哈希值作为数组下标.如果数组的这个位置是 ...
- Microsemi Libero系列教程(二)——新建点灯工程
前言 上一篇文章,介绍了Microsemi Libero系列教程(一)-Libero开发环境介绍,下载,安装与注册,作为嵌入式开发中的Hello World,点灯是再也基础不过的实验了,通过点灯实验, ...
- C# 网络编程之简易聊天示例
还记得刚刚开始接触编程开发时,傻傻的将网站开发和网络编程混为一谈,常常因分不清楚而引为笑柄.后来勉强分清楚,又因为各种各样的协议端口之类的名词而倍感神秘,所以为了揭开网络编程的神秘面纱,本文尝试以一个 ...
- js中关于带数字类型参数传参丢失首位数字0问题
最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...
- swift冒泡排序,swift快速排序,swift归并排序,swift插入排序,swift基数排序
import UIKit /// 冒泡 /// ///时O(n2),空O(1) 稳定排序 func Mysort(arr:[Int]) -> [Int]{ var transArr = arr ...
- 使用PowerShell实现服务器常用软件的无人值守安装
操作系统:windows server 2016 , windows server 2019 软件环境: 类型 名称 版本 系统功能 TelnetClien IIS 启用Asp.n ...
- Linux中crontab定时任务
crontab安装(centOS) yum -y install vixie-cron crontab语法(计划任务) crontab [-u user] file crontab [-u user] ...