熟悉HTML
一,什么是HTML和CSS?
1. HTML:超文本标记语言(结构)
CSS:层叠式样表(样式)
(与JavaScript并称”前端三巨头“)
JavaScript:用来做交互的一种脚本语言。
2.五大浏览器:
IE/Edge,Safari,Chrome, Firefox,Opera
3.前端所需技术:
UI设计师:设计稿
web前端开发工程师:
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
HTML:结构
Css:样式
web后端:
二,HTML基本结构与属性
1.所需工具:
ctrl+s: 保存
ctrl+a: 全选
ctrl+x/c/v: 剪切.复制.粘贴
ctrl+z/y: 撤销/前进
shift+end: 从头选中一行
shift+home:从尾部选中一行
shift+alt+↓:快速复制一行
alt+↓或↑: 快速移动一行
tap: 向后缩进
tap+shift: 向前缩进
2.超文本:文本内容+非文本内容(图片,视频,音频等)
标记:<单词>
语言:编程语言
3.标签:
标记也叫标签<header> <footer>
写法分为两种:
单标签:<header>
双标签:<header></header>
创建标签的快捷键:tap
标签可以上下排列也可以组合嵌套
标签的属性:来修饰标签的,设置当前标签的一些功能。
<标签 属性=“值”属性2=“值2”>
4.体验JS魅力:
<style>
div{color:red;font-style:italic;}
</style>
<div>HTML+CSS</div>
<script>
let div =document.querySelector('div');
let time=null;
let flag=true;
div.onmouseover=function(){
timer=setInterval(()=>{
if(flag){
div.style.color='blue';
div.stylefontstyle='normal';
}
else{
div.style.color='red';
div.style.fontstyle='italic';
}
flag=!flag;
},500);
};
div.onmouseout=function(){
clearInterval(timer);
};
</script>
三,HTML细化
1.HTML初始代码:
每个.html都有的代码,要复合html文件的规范写法。
创建.html初始代码快捷键:!+tap键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
初始代码释意:
文档声明:告诉浏览器这是一个html文件 html最外层标签:包裹着所以html标签代码 lang="en"表示一个英文网站 lang=" zh-CN"表示一个中文网站 元信息:是编写网页中的一些赋值信息 国际编码让网页不出现乱码的情况2.HTML中注释:
写法:<!-- 注释的内容–>在浏览器中看不见,只能在代码中看到注释的内容。
意义:
1.把暂时不用的代码注释起来,方便以后使用。
2.对开发人员进行提示。
快捷添加注释与删除注释:
1.ctrl+/
2.shift+alt+a
<!-- hello world -->
3.HTML语义化:
根据网页中内容的结构,选择合适的标签进行编写。
4.标题与段落:
标题:双标签
....在一个网页中h1标题最重要,并且一个.html文件中只能出现一次h1标签。
一个段落就是一个p标签,h2为二级标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>林丹</h1>
<h2>人物简介</h2>
<p>林丹,汉族,1983年10月14日出生于福建省龙岩市上杭县临江镇,中国羽毛球男单运动员,2008年北京奥运会、2012年伦敦奥运会羽毛球男单冠军,羽毛球史上第一位集奥运会、世锦赛、世界杯、苏迪曼杯、汤姆斯杯、亚运会、亚锦赛、全英赛、全运会及多座世界羽联超级系列赛冠军于一身的双圈全满贯选手,被誉为中国羽毛球一哥,21世纪初期世界羽毛球四大天王之一</p>
<h3>个人经历</h3>
<p>1988年,5岁开始接触羽毛球。 [1] 2000年进入国家队。 [1] 2002年8月,首次登上羽毛球世界排名第一的位置。 [2] 2005年12月,获羽毛球世界杯男单冠军,并于2006年卫冕。 [3] </p>
<p>2012年伦敦奥运会成功卫冕,成为首位在奥运会羽毛球男单项目中实现卫冕的运动员。 [5] 2013年8月,第五次获得羽毛球世锦赛男单冠军(2006、2007、2009、2011、2013),连续三年在世界大赛决赛中战胜李宗伟 [6] 。2014年仁川亚运会男单冠军,成功卫冕并实现了双圈全满贯。 [7] 2016年3月,第六次获全英赛男单冠军。 [8] 8月第四次征战奥运会。</p>
</body>
</html>
5.文本修饰标签:
强调->双标签:
表示强调,对文本进行斜体
下标文本
上标文本
删除文本插入文本
区别:1.写法和展示效果是有区别的,一个加粗,一个斜体。
2.前者 强调性更强
<strong>这是一段需要强调的文本</strong>
<em>这是一段需要强调的文本</em>
6.图片标签与图片属性:
图片标签:单标签img
src:引入图片的地址。
alt:当图片出现问题,会显示一段友好的提示文字。
title:提示信息
width:,height:控制图片大小
7.引入文件的地址路径:
引入路径: ./引入同一级别
../引入外面级别
8.跳转链接:
双标签
href属性:链接地址
target属性:可以改变链接打开方式,默认情况下:在当前页面打开_self 新窗口打开_blank
9.跳转锚点:
实现一:
#号
id属性
实现二:
#号
name属性
10.特殊符号:
空格符:  
版权:©
注册商标:®
小于号:<
大于号:>
和号:&
人民币:¥
摄氏度:°
(可以搜索”w3schools")
11.列表:
无序列表:
<ul> <li>:列表的最外层容器、列表项
组合使用,他们之间不能有其他标签
type属性:改变前面标记的样式(一般用css控制 )
有序列表:
<ol><li>:列表的最外层容器、列表项
组合使用,他们之间不能有其他标签
定义列表:(列表项需要添加标题
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释或描述