文章目录
- 1.认识HTML
- 2.html 框架
- 3.HTML常见标签
- 4.HTML语法特征
- 5.列表
1.认识HTML
html是超文本标记语言:
目前最新版本是html5,由w3c(万维网联盟)完成标准制定。
HTML ，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是用来描述网页的一种语言， 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
何为超文本?
文本只是单纯的显示字符串,超文本还可以显示音频,视频,图片,对内容可以有不同样式的调整,即是超文本.
发展历史:
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言,是HTML最新的修订版本，
2014年10月由W3C(制定Web技术标准的机构)制定。
html如何识别?
html超文本标记语言,在b/s架构的服务中,利用http超文本传输协议,让浏览器进行解析,http独占80端口.
http: 超文本传输协议 (对html标记语言,传输解析的标准)
https: 加密版超文本传输协议 443
浏览器: 超文本的解析器
2.html 框架
<!-- --> 表示html注释
<!--
html : 网页的骨架
css : 网页的样式
js/jq: 网页的动作
-->
复制<!DOCTYPE html> 声明文档的类型是html 超文本标记语言 <html> <head> 此处写入web网页的配置信息 </head> <body> 此处写入网页的主体内容 <font color="red" size=5> 学习html </font> #目前font标签已被淘汰 </body> </html>
将html文件拉到浏览器，使用的是file协议
使用vscode 的open with live server打开的是http协议
3.HTML常见标签
font,meta,br,hr,pre,h1~h6,sub,p,strong,em
sub,sup,div,span,ul,ol,dl,a,img,
table,form,input,iframe
HTML标签种类
块状元素: 独占一行,可直接设置宽高
例如:<h1>~<h6>,<div>,<p>,<ul>,<ol>,<dl>,<li>,<table>,<form> ..
行内元素: 不能独占一行,不能直接设置宽高
例如:<span>,<a>,<label>,<strong>,<em>
行内块状元素: 不能独占一行,可直接设置宽高
例如:<img>,<button>,<input>
复制4.HTML语法特征
1.内容不区分大小写
2.标签结构分为单闭合、双闭合标签(标签成对显示)
3.一个及多个空白符,都会被理解成一个空白符
页面代码写了多个空白符
网站页面只显示一个空白符
body里面写标签，大于号小于号，页面不会解析
换行标签
<!-- 分割线标签 --> 一般是做演示的时候用
<hr />
复制
字符实体:使用字符实体来表达实际的字符含义;
使用字符实体表达多个空格
< : < 小于号 > 大于号
例子:
5<d c>10
复制
<!-- 格式化预览标签 原型化输出所有内容 <pre> -->
<pre>
333
+444
------
777
</pre>
复制
如果不加<pre>标签，则显示不出效果
复制
并列显示了
<!DOCTYPE html> <html> <head> <!--设置编码集，meta是单标签--> <meta charset="utf-8" /> <!--设置网站标题--> <title>这是前端界面</title> <!--设置网站显示的图标--> <!-- http://www.bitbug.net/ 制作小图标的网址--> <link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico"/> <!-- 设置搜索排名权重分配，使用keywords，content里面配置相关搜索的关键字 --> <meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯" /> <!-- 设置搜索引擎抓取页面的描述信息，使用description --> <meta name="description" content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区."> <!-- 设置几秒之后页面跳转,content 设置等待几秒刷新，或跳转，跳转的url，url必须要写协议 --> <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> --> </head> <body> <!-- 一个及多个空白符,都会被理解成一个空白符 --> 1111 3333 343434 234234 <!-- 换行标签 --> <br /> 3<d c>10 11111 <!-- 分割线标签 --> <hr /> 5<d c>10 <br/> <!-- 格式化预览标签 原型化输出所有内容 <pre> --> <!-- <pre> --> 333 +444 ------ 777 <!-- </pre> --> </body> </html>
常见标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> 常见标签 </title> </head> <body> <h1>一级标签</h1> #最多6级，超过6就当做字符串显示了 <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <hr /> <!-- 下角标 sub --> h20 => h<sub>2</sub>0
<br /> co2 => co<sub>2</sub>
<br /> <!-- 上角标 sup --> x2 = 100 => x<sup>2</sup> = 100
<!-- p 是段落标签 --> <p>这是第一个段落</p> #一般段落我们用<div>标签，<p>标签一般塞入文章 <p>这是第二个段落</p> <hr /> <!-- (了解)逻辑强调 带有语义话的含义 [w3c标准] 推荐--> <strong>川普是我的偶像</strong>
<em>我的爱人</em>
<!-- (了解)物理强调 带有语义话的含义 [非w3c标准] w3c之前用的是b标签--> <b>川普是我的偶像</b> <i>我的爱人</i> </body> </html>
块状标签，行内标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 指定移动端缩放比例，适配不同屏幕大小 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签的种类</title> </head> <body> <!-- 标签的种类: (1) 行内元素标签: 不能独占一行,不能设置宽和高,横向排列 例子: span a (2) 块状元素标签: 独占一行,可以设置宽和高,纵向排列 例子: div h1~h6 p (3) 行内块状标签: 不能独占一行,能设置宽和高,横向排列 例子: button img input span 和 div 都属于无语义化标签,用来布局页面,划分页面结构 --> <!-- 行内元素 --> <span style="width:200px;height:200px;background-color:yellowgreen;">我爱你 <span>奥斯托夫罗斯基</span> </span> 111
设置宽和高无效，换行无效
div独立成行，100%横跨整个页面
按我1
按我2
按我3
行内块状标签，不能独占一行,能设置宽和高,横向排列
</body> </html>
5.列表
浏览器右键检查，或者按F12，打开调试窗口，点击小箭头，鼠标在网页放的位置可以找到对应代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ul 是无序列表 ，里面的小选项用li 包起来*** --> <!-- square 方块 circle 空心圆 --> <ul type="square"> <li>姜子牙</li> <li>我和我的家乡</li> <li>八百</li> <li>唐人街探案3</li> </ul>
列表左边的标志类型可以设置，一般不用。原形态，默认实心圆
方块
空心圆
- 姜子牙
- 我和我的家乡
- 八百
- 唐人街探案3
默认有序列表
起始值可以设置，一般不用
-
女生曾经说过的谎言:
- 不要
- 你真坏
- 你是个好人
- 我给你介绍个漂亮的小姑娘
定义列表，文字方式
</body> </html>
总结，html标签理解起来比较简单，经常运用就比较熟悉了，零基础也能很快掌握，小伙伴们尝试一下吧！
