HTML基础知识
1.什么是HTML、CSS？
两种编程语言，配合使用，是作为网站（一个网站由多个网页组成，浏览器把代码解析后的样子就是网站）开发的基础语言
html是HyperTextMark-upLanguage的缩写，即超文本标记语言；
css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充
2.Web前段的三大核心技术
HTML：结构–框架
在VScode编辑器中新建一个文本–
<div>HTML+CSS系列教程</div>
CSS：样式–美化
<style>
div{color:blueviolet}
</style>
JavaScript：行为–用户的交互行为【鼠标划过网站界面显示小提示等】
<script>
let div = document.querySelector('div');
let timer=null;
let flat=true;
div.onmouseover=function(){
timer=setInterval(()=>{
if(){
div.style.color='blue';
div.style.frontstyle='narmal';
}
else{
div.style.color='red';
div.style.frontstyle='italic';
}
flag=!flag;
},500);
};
div.onmouseover=function(){
clearInterval(timer);
};
</script>
3.HTML基础结构与属性
超文本：除了基本文字以外的内容（音频，图片，视频 等）
标记(标签)；<单词><header><footer>
单标签<header>
双标签<header></header>
根据网页中内容的结构，选择适合的HTML标签进行编写（h5o - HTML5 Outliner）
结构标签：(块状元素) 有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF（嵌入系统）
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ，配合dt、dd C
注释标签
<ruby> 标记定义 注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
**其他标签
**<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput
删除的HTML标签
纯表现的元素：
basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
产生混淆的元素：
acronym ，applet，isindex，dir
重新定义的HTML标签
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可用
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
标签的属性：用来修饰标签的，设置当前标签的一些功能
<标签 属性=“值1” 属性2=“值2”>
<header title ="hi">hello world</header>>
4. HTML初始代码
每个HTML文件都含有的代码，要符合HTML文件规范写法
快速生成HTML初始代码：!+tab
<!DOCTYPE html> //文档声明：告诉浏览器这是一个HTML文件
<html lang ="en">//HTML文件的最外层标签，包含着所有HTML标签代码lang="en"表示英文网站 lang=“zh-CN”表示中文网站
<head>
<meta charset="UTF-8">//元信息：是编写网页中的一些赋值信息（采用国际编码，不至于出现乱码）
<meta name ="viewport" cont ="width=device-width,intial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>//设置浏览器上方小框的标签
</head>
<body>
显示网页信息
</body>
</html>
5.HTML注释
写法：<!--注释的内容-->
快速添加注释与删除注释：
1.Ctrl+/
2.shift+alt+a
6.HTML语义化
标题与段落
标题–双标签<h1></h1>......<h6></h6>
在一个网页中，<h1>标题最重要，并且一个.html文件中只能出现一次<h1>标签
段落–>双标签：<p></p>
文本修饰标签
强调（双标签）：<strong>强调内容</strong>
斜体：<em></em>
下标文本、上标文本：<sup> <sub>
a2+b2=c2
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
删除文本、插入文本：<del>/<ins>
促销原价<del>300</del>，现价<ins>100</ins>
图片标签
img–单标签
src：引入图片地址
alt：当图片出现问题时，可以显示备用文字
title:提示信息
weight、height:控制图片大小
<img src ="https://inews.gtimg.com/newsapp_bt/0/15339448098/1000" alt="" title="信息提示" weight="300">
7.引入文件的地址路径
相对路径：
./在路径中表示当前路径
…/在路径中表示上一级路径
绝对路径:直接写出文件所在的地址
8.跳转链接
a->双标签 <a></a>
href属性：链接的地址
<a href="http://www.qfedu.com">
<img src="./exep1_1/ " alt="">
</a>
点击图片或文字即可访问网站
target属性：可以改变链接的打开方式(在新窗口展开)默认情况下：当前页面打开_self // 新窗口打开__blank
<a href ="http://www.baidu.com" target="_blank">访问百度</a>
base->单标签：作用就是改变链接的默认行为
（创建一个窗口跳至另一窗口）
<a href="./detail.html">详情页</a>
<img src="../images/2.jpg.jpg" alt="">
9.跳转锚点
作用：在该页面内进行切换
实现方法一：#号 id属性
<h2 id="html">HTML超文本标记语言</h2>
实现方法二：#号 name属性（注意name属性是加给a标签的）
<a name="html"></a>
示例：
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" cont ="width=device-width,intial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
</body>
<a href="#html">HTML</HTML></a>
<a href="#css">CSS</a>
<a href="#JavaScript">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="css"></a>
<h2>css层叠样式表</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="JavaScript"></a>
<h2>JS脚本</h2>
<p>模拟段落</p>
<p>模拟段落</p>
</body>
</html>
10.特殊符号
&+字符 （< > )
11.列表标签
无序列表
<ul> <li>：列表的最外层容器、列表项
注：ul 和 li 必须是组合出现的，他们之间不能有其他标签，li内部可以有别的标签
type属性：改变前面标记的样式（一般用css去控制）（http://www.w3school.com.cn/tags/att_ul_type.asp）
正确写法：
<ul typy="square">
<li>第一项</li>
<li>第二项</li>
</ul>
错误写法：
<ul>
<p>
<li>
</li>
</p>
</ul>
示例：
<ul>
<li><a href="#"><strong>学习使我快乐</strong></a></li>
<li><a href="#">好好学习</a></li>
<li><a href="#">天天向上</a></li>
</ul>
a href是链接地址，暂时先不添加，先用#占格
有序列表：
<ol></ol>、<li>:列表的最外层容器、列表项（两者直接不能有其他标签）
注：有序列表用的非常少，经常使用的是无序列表，无序列表刻印去代替有序列表
也具有type属性<ol type=" ">
<ol type="I">
<li>学习真好</li>
<li>我爱学习</li>
<li>不停学习</li>
</ol>
定义列表
<dl>:定义列表
</dl>
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>Javascript</dt>
<dd>网页脚本语言</dd>
</dl>
2387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
