思考再三,萌芽决定把自己学生时代珍藏多年的CSS笔记发出来,特别常用适合背不下来标签的新手小白哟!
《 HTML 》篇(长期更新)
1 HTML基础
1.1 什么是标记语言
Word文档就是标记语言的一种,而现在要学习的HTML(Hyper Text Markup Language)也是一种标记语言,叫做超文本标记语言。
超文本标记语言:不光可以保存文字信息,还可以保存音频、视频等内容。
在我们浏览网页时,其实是将储存在服务器上的HTML文件下载到本地,在通过浏览器进行解析,从而呈现了网页内容。
2 HTML基础标签
- HTML的基本结构
<html> <head> <meta charset="UTF-8"> //设置字符集<title>Title</title> //设置标题 </head> <body> </body> </html>
HTML的基本构架包括三大部分:<html>标签:是整个目录的根节点,包括了两个子节点。
<head>标签:主要设置一些写代码时需要做的设置工作,比如字符集、标题。
<body>标签:文档的主体部分,页面中要呈现的内容都在这里。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">// Ps. 乱码的话不如试试这个
3 HTML基础标签
3.1 标题标签
常用的标题标签有<h1>——<h6>;由于显示页面的标题,包含了标题的格式、语义信息等内容。
3.2 段落标签
<p>
快捷方式 p*4 按住tab键。
(tab代表页面补全)
3.3 链接标签
<a>标签,作用的就是页面跳转,包括页内跳转和页间跳转。
页面跳转
href属性:链接的目标地址
target属性:控制页面跳转方式,其取值有四个:
- Blank:在新的页面打开
- Self:在当且页面打开(默认的打开方式)
- Top:
- Parent:
<a href="//www.baidu.com/" target="_blank">跳转到百度</a>
要给“目的地”设置一个id,在<a>标签中的href属性里面使用“#……(id名)”这样就能实现页内跳转。id属性具有唯一性,是页面元素中的唯一标识,id名不能重复。
<a href="#p1">跳转到底部</a>
<p id="p1">页面底部</p>
3.4图片标签
<img>图片标签:在网页中插入图片:
<img src="img/图片1.png" alt=""> <!--src从哪儿来 alt到哪儿去-->
<img src="../图片2.png" alt="">
<img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt="">
图片可以从本地载入,也可以从网页载入:本地载入时要找到图片的储存地址,在网页载入时要找到图片的网络地址。
相对路径:
调用上一级用“../图片1”
调用下一级用“/:图片1”
调用同级目录“.:图片1”这个.可以省略
绝对路径:
直接在起始目录 / 开始就是绝对路径。
3.4列表
无须列表在word中:<ul>标签来定义。(可在type属性里选择样式)
序列内容用<li>标签来填写&#