文章目录
一:HTML基础
1、HTML介绍
HTML又称超文本标记语用于创建言(标签+标记),是一种用于创建网页的标准标记语言。可以配合Javascript和css3建立web网站,HTML运行于浏览器,由浏览器解释运行。
2、HTML语法
- html语法构成:标签和属性
- <标签名></标签名> 双标记
- <单标签/> 单标记
- <标签名 属性名01=“具体值” 属性名02=“具体值” ></标签名> :属性可多个,空格隔开
3、HTML组成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
头部 --可在这引用外部文件和声明HTML基本信息
</head>
<body>
主体 --在这编辑HTML代码
</body>
</html>
4、HTML基础标签
-
h1-h6 标题标签:用于做标题用的h1到h6的默认样式(字体大小、文本粗细)逐级减小
<h1>唯一性:同页面只能出现一次,放网站logo用的,不能嵌套<h1> <h2>出现任意次,但不能嵌套</h2> <h3>出现任意次,但不能嵌套</h3> <h4>出现任意次,但不能嵌套</h4> <h5>出现任意次,但不能嵌套</h5> <h6>出现任意次,但不能嵌套</h6>
-
文本格式化标记标签
<b>字体加粗</b> <strong>字体加粗</strong> <u>字体有下划线</u> <ins>字体有下划线</ins> <sup>下标</sup> <sub>上标</sub> <s>字体有删除线</s> <del>字体有删除线</del> <i>字体倾斜</i> <em>字体倾斜</em>
-
段落标签p:这个标签占浏览器一行
<p>内容</p>
-
:可以放一段文字,但不占一行
-
水平线
,换行标签
-
无序列表:前面带实心的列表符号(黑点)的列表
<ul> <li>标签1</li> <li>标签2</li> </ul>
-
有序列表:前面带123/abc/的列表
<ol type="a\A\i\I" start="从第几个开始"> <li>标签1</li> <li>标签2</li> </ol>
-
自定义列表:前面可以自己定义的列表名
<dl> <dt>列表题</dt> <dd>列表</dd> </dl>
-
图片img标签
<img src="图片的地址" alr="图片无法加载的提示文字">
-
超链接a标签:可以跳转网站
<a href="跳转的地址" target="_blank:弹出新窗口/_self:在当前页面"></a>
-
表格标签table
<table border="表格线的粗细" cellspacing="边框间距" cellpadding='边框和内容距离'> <tr> tr:是一行 <td> td:在行里的格子 align="" :水平对齐方式 rowspan="数字":合并行(数字代表几个单元格合并) colspan="数字" 合并列(数字代表几个单元格合并) 注意:a、无论合并行还是和并列,操作的都是td b、只要是跨行的都是合并行,没有跨行的都是合并列 c、和谁合并删除谁 sd、如果一个表格,既有合并行又有合并列,建议先合并列(为了方便自己好数和好删) </td> </tr> </table>
-
表单标签:用于向后端发送数据进行交互
<form name="表单名称" action='发送地址' method="数据传输方式 get/post"> 输入框:<input type="text"> 密码框:<input type="password"> 重置按钮:<input type="reset"> 单选按钮:<input type="radio"> 复选按钮:<input type="checkbox" name="v1"> 复选按钮:<input type="checkbox" name="v1">(name相同则是同一个复选) 提交按钮:<input type="submit"> 按 钮: <input type="button"> </form>
5、结构元素
- header元素:这个元素具有引导和导航作用。该元素可以包含通常放在页面头部的内容
<header> <h1>网页主题</h1> </header>
-
nav元素:用于定义导航链接,该元素可以将具有导航性质的链接归纳在一个区域内,使页面语义更加明确
<nav> <ul> <li></li> </ul> </nav>
-
article元素:代表文档、页面或者应用程序中与上下文无关的独立部分,经常用于定义一篇日志、一条新闻
<article> </article>
-
aside元素:用来定义当前页面或者文章的附属信息部分,可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航栏
<asize></asize>
-
section元素:用于对网站页面的内容分块。通常section元素由内容和标题
<section> <h2>标题</h2> <article>内容</article> </section>
-
footer元素:用于定义一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容
<footer> 文章分页列表 </footer>
6、分组结构
- figure元素和figcaption元素 :
figure用于定义独立的流内容(图像、图表、照片、代码)一般指一个单独的单元。figure元素的内容应该与主内容相关,但如果被删除,也不会对文档流产生影响。figcaption用于为figure添加标题。一个figure可放多figcaption,且置于头或尾部。
<figure> <figcaption>标题</figcaption> <p>内容</p> <img> </figure>
-
hgroup元素:用于将多个标题(主标题和副标题或者子标题)组成一个标题组,通常与h1-h6标题组合使用
<hgroup> <h1></h1> <h2></h2> </hgroup>
7、页面交互元素
-
details元素和summary元素
details元素用于描述文档某个部分的细节。summary元素经常与details元素配合使用,作为details的第一个子元素,用于为details定义标题。标题可见,当用户点击标题是details中的其他内容就会显示或隐藏。
<details> <summary>显示列表</summary> <ul> <li>隐藏列表</li> </ul> </details>
-
progress元素:用于表示一个任务的完成进度(value:已经完成的进度,max:总量大小)
<progress value="50" max="100"></progress>
-
meter元素:用于表示指定范围内的数值
<meter value="65" min="0" max="65" low="定义度量最低值的点" optimum="定义最佳值"></meter>
8、文本层次语义元素
-
time元素:用于定义时间日期,能够给搜索引擎智能识别出,一般无任何特殊效果
<time datetime="用于定义相应的时间或日期,取值为具体时间" pubdata="定义文档的发布时间"></time>
-
mark元素:文本高亮显示某些字符引用户注意
<mark>高亮显示的文字</mark>
-
cite元素:创建一个引用标记,用于对文档参考文献的引用说明
<cite>--路遥《平凡的世界》</cite>
9、全局属性
- draggable属性:用于定义元素是否可以拖动,true值可拖动/false不可拖动
<article draggable="true">可拖动</article>
-
hidden属性:用于定义元素是否可以显示,true值可显示/false不可显示
-
spellcheck属性:用于Input元素和texttarea输入框,是否开启语法检查,true值可检查/false不可检查
-
contenteditable属性:规定是否可编辑元素的内容
二、HTML进阶
1、div盒子元素
盒子模型就是把HTML页面的元素看作是一种矩阵的盒子,也就是一个盛装内容的容器。每个盒子都由元素的内容、内边距、外边距和边框组成。
<div>
<div>
div中可以多层嵌套
</div>
</div>
2、视频和音频元素
<video src="视频文件路径" controls='controls'>
autoplay="autoplay":单页面载入完成后自动播放视频
loop="loop":音频结束后重新开始播放
preload="preload":页面加载时进行加载,并预备播放
poster="地址":但视频缓存不足时,该属性链接一个图像,必将该图像按照一定的比例显示出来
</video>
<auto src='音频文件路径' controls='controls'>
autoplay="autoplay":单页面载入完成后自动播放音频
loop="loop":音频结束后重新开始播放
preload="preload":页面加载时进行加载,并预备播放
</auto>