介绍
- HTML标记语言:组成网页架构的元素组件(作为骨架)
- CSS样式语言:美化网页的样式(css帮助html做个美化)
- JavaScript程式语言:控制网页的动态效果(做动作,做操作的)
- Jquery程式语言:协助及加强JavaScript的实现(对js的封装)
HTML介绍
HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以html结尾HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:<html> 标签有两种表现形式:
- 双标签,例如:<html></html>
- 单标签,例如:<img>
HTML5的DOCTYPE声明(有点像shell里面的 #/bin/bash)
DOCTYPE是document type(文档类型)的缩写。<!IDOCTYPE html>是H5的声明位于文档的最前面,处于标签之前。他是网页必备的组成部分,避免浏览器的怪异模式。(每个厂商都有自己的浏览器,不同的浏览器可能同样的代码展示出不同的效果,加上这个声明,避免了同样的代码在不同的浏览器上展示出不同的效果)
<!DOCTYPE html>
HTML5 基本骨架
- HTML是一种用于创建网页的标记语言,可以使用HTML创建网页文档,用浏览器打开会自动解析。
- HTML是由标签和内容构成的。
head标签(CSS样式是写在head里面的)
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。(head中定义的东西都是给浏览器看的,包含了浏览器的各种信息)
<!DOCTYPE html>
<html>
<head>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<link rel="stylesheet" href="./css/main.css"><link>
<style>
/*css代码*/
</style>
</head>
<body>
文档的内容...
</body>
</html>
title标签
可定义文档的标题,它显示在浏览器窗口的标题栏或状态栏上,<title>标签是<head>标签中唯一必须要求包含的东西,就是说写head一定要写title。
<title>的增加有利于SEO优化,SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎(百度,Google这些都是搜索引擎,帮你去做搜索的)的排名需求。(seo排名越高,用户点击的概率越大)
meta标签(放字符集)
meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charsel=utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<meta charset="utf-8">
<script type="text/javascript" src="is/main.js"></script>
</head>
<body>
我会显示在浏览器中
</body>
</html>
link
引用外部资源,或者内部的本地文件。一般用来引用css
script
一般引入的是js,或者jquery的一些包。
style
头部的style这个位置,定义的是css代码,写css的样式在这个位置去写。
html标签
定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点。
<!DOCTYPE html>
<html>
</html>
body标签(看到的整个页面其实都是body里面的内容,js的代码是写在body里面的)
body元素定义文档的主体。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)它会直接在页面中显示出来,也就是用户可以直观看到的内容
<!DOCTYPE html>
<html>
<head>
</head>
<body>
我会显示在浏览器中
</body>
</html>
文本格式化标签
标题标签
标题介绍与应用
标题(Heading)是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题 <h6>定义最小的标题,标签是成对出现的
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
VSCode插件
快速打开浏览器扩展->搜索open in browser ->点击安装
正确使用标题
请确保将HTML标题标签只用于标题,不要仅仅是为了生成粗体或大号的文本而使用标题,正确使用标题有益于SEO,应该将<h1>用作主标题(最重要的),其后是<h2>(次重要的),再其次是<h3>,以此类推。
上面手机就是标题,那么你使用h1标签是不合理的,这个和内容的级别有关系。
标题标签位置摆放
在标签中添加属性:align=left | center |righr 默认居左
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
标签之段落<p> 自动换行
段落是通过<p>标签定义的
<p>这是一个段落</p>
<p>这是另一个段落</p>
段落是自带换行功能。
标签之文本
<p>是段落标签,一些词汇使用段落标签去承载这样是不太合适。这个时候就需要使用文本标签。
特别提示:常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇。
<span>是没有任何效果的,是后续为了css添加方便一些存在的。
<em>em白菜</em>
<i>i白菜</i>
<b>b白菜</b>
<strong>strong白菜</strong>
<span>span白菜</span>
标签也可以嵌套使用,上面这些标签都可以嵌套在p标签当中。
<p>嵌套效果<strong>strong白菜</strong></p>
可以看到价格就有语气加重的标签strong,而前面人民币这个符号没有上面含义就代表人民币¥,为了后期添加样式添加span标签去承载。
这些标签的使用可以根据写页面的语意来进行添加就可以了。
换行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用<br>,br元素是一个空的HTML元素。br是单标签,而不是双标签。
<p>这个<br>段落<br>演示了分行的效果</p>
水平线
shm>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>
属性:
- color:设置水平线的颜色
- width:设置水平线的宽度
- size:设置水平线的高度
- align:设置水平线的对齐方式(默认居中),可取值left|right
标签描述:
自带换行的比如h,以及段落,其他的都不会自动换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
</head>
<body>
<h1>hello world 标题h1</h1>
<h2>hello world 标题h2</h2>
<h3>hello world 标题h3</h3>
<br/>
<p>hello world 段落</p>
<i>hello world 斜体</i>
<br/>
<cite>hello world 引用</cite>
<br/>
<b>hello world 加粗</b>
<br/>
<strong>hello world 强调加粗</strong>
<br/>
<del>hello world 删除</del>
<br/>
<a>hello world 文本</a>
</body>
</html>
列表标签
标签描述:有序列表是一列项目,列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。
你得先定义是ul还是ol,定义好了之后再到里面填写具体的内容。有序还是无序使用外层的结构就行了。
ol ul是去控制其是有序还是无序,以及有序无序的列表的样式通过type来控制。
type属性:
- <ol>的属性type拥有的选项
- 1 表示列表项目用数字标号(1,2,3..)
- a 表示列表项目用小写字母标号(a,b,c.)
- A 表示列表项目用大写字母标号(A,B,C..)
- i 表示列表项目用小写罗马数字标号(i,ii,ii…)
- I 表示列表项目用大写罗马数字标号(1,II,I.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
</head>
<body>
<!--无序列表-->
<ul type="circle">
<li>coffee</li>
<li>milk</li>
</ul>
<!--有序列表-->
<ol type="A">
<li>bread</li>
<li>juice</li>
</ol>
</body>
</html>
有序列表嵌套,可以看到列表里面是可以嵌套的。但是实际当中不建议嵌套太多层,这样比较复杂。
<ol type="A">
<li>水果</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>萝卜</li>
</ol>
</li>
</ol>