HTML+CSS基础知识1
HTML基础知识
-
- 1.什么是HTML、CSS？
- 2.Web前段的三大核心技术
- 3.HTML基础结构与属性
- 4. HTML初始代码
- 5.HTML注释
- 6.HTML语义化
- 7.引入文件的地址路径
- 8.跳转链接
- 9.跳转锚点
- 10.特殊符号
- 11.列表标签
1.什么是HTML、CSS？
两种编程语言，配合使用，是作为网站（一个网站由多个网页组成，浏览器把代码解析后的样子就是网站）开发的基础语言
html是HyperTextMark-upLanguage的缩写，即超文本标记语言；
css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充
2.Web前段的三大核心技术
HTML：结构–框架
在VScode编辑器中新建一个文本–
<div>HTML+CSS系列教程div>
CSS：样式–美化
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基础结构与属性
超文本：除了基本文字以外的内容（音频，图片，视频 等）
标记(标签)；<单词>
单标签
双标签
根据网页中内容的结构，选择适合的HTML标签进行编写（h5o - HTML5 Outliner）
结构标签：(块状元素) 有意义的div
标记定义一篇文章
标记定义导航链接
标记定义一个区域
标记定义页面内容部分的侧边栏
标记定义文件中一个区块的相关信息
标记定义一个页面或一个区域的底部
标记定义一个对话框(会话框)类似微信
多媒体交互标签
标记定义一个视频
标记定义音频内容
标记定义图片
标记定义外部的可交互的内容或插件 比如flash
Web应用标签
命令列表
menu命令列表标签 FF（嵌入系统）
状态标签 (任务过程:安装、加载) C、F、O
为input标记定义一个下拉列表,配合option F、O
注释标签
标记定义 注释或音标
告诉那些不支持 Ruby元素的浏览器如何去显示
标记定义对ruby的注释内容文本
**其他标签
** 标记定义表单里一个生成的键值(加密信息传送)O、F
标记定义有标记的文本 (黄色选中状态)
标记定义一些输出类型,计算表单结果配合oninput
删除的HTML标签
纯表现的元素：
basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
产生混淆的元素：
acronym ，applet，isindex，dir
重新定义的HTML标签
代表内联文本，通常是粗体，没有传递表示重要的意思
代表内联文本，通常是斜体，没有传递表示重要的意思
可以同details与figure一同使用，定义包含文本，dialog也可用
可以同details与figure一同使用，汇总细节，dialog也可用
重新定义用户界面的菜单，配合commond或者menuitem使用
表示小字体，例如打印注释或者法律条款
表示重要性而不是强调符号
标签的属性：用来修饰标签的，设置当前标签的一些功能
<标签 属性=“值1” 属性2=“值2”>
<header title ="hi">hello worldheader>>
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>Documenttitle>//设置浏览器上方小框的标签
head>
<body>
显示网页信息
body>
html>
5.HTML注释
写法：
快速添加注释与删除注释：
1.Ctrl+/
2.shift+alt+a
6.HTML语义化
标题与段落
标题–双标签......
在一个网页中，标题最重要，并且一个.html文件中只能出现一次标签
段落–>双标签：
文本修饰标签
强调（双标签）：强调内容
斜体：
下标文本、上标文本：
a2+b2=c2
a<sup>2sup>+b<sup>2sup>=c<sup>2sup>
删除文本、插入文本：/
促销原价<del>300del>，现价<ins>100ins>
图片标签
img–单标签
src：引入图片地址
alt：当图片出现问题时，可以显示备用文字
title:提示信息
weight、height:控制图片大小
<img src ="https://inews.gtimg.com/newsapp_bt/0/15339448098/1000" alt="" title="信息提示" weight="300">
7.引入文件的地址路径
相对路径：
./在路径中表示当前路径
…/在路径中表示上一级路径
绝对路径:直接写出文件所在的地址
8.跳转链接
<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>Documenttitle>
head>
body>
<a href="#html">HTMLHTML>a>
<a href="#css">CSSa>
<a href="#JavaScript">JavaScripta>
<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 必须是组合出现的，他们之间不能有其他标签，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是链接地址，暂时先不添加，先用#占格
有序列表：
、
注：有序列表用的非常少，经常使用的是无序列表，无序列表刻印去代替有序列表
也具有type属性
<ol type="I">
<li>学习真好li>
<li>我爱学习li>
<li>不停学习li>
ol>
定义列表
<dl>:定义列表
dl>
:定义专业术语或名词
:对名词进行解释和描述
<dl>
<dt>HTMLdt>
<dd>超文本标记语言dd>
<dt>CSSdt>
<dd>层叠样式表dd>
<dt>Javascriptdt>
<dd>网页脚本语言dd>
dl>
