HTML
HTML: “Hyper Text Markup Language”(超文本标记语言)
标签=元素
语法:
<标签符>内容</标签符>
标签成对出现,结束符号的标签符前面会有/
HTML页面通常有四个部分:
一个文档声明:<!DOCTYPE html>
一个HTML标签对:<html></html>
一个head标签对:<head></head>
一个body标签对:<body></body>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
head
<head>
标签表示页面的“头部”
一般来说,有以下六个标签能在 <head>
内
<title>,<meta>,<link>,<style>,<script>,<base>
-
title:定义网页的标题
-
meta:定义页面的特殊信息,例如关键字、页面介绍等,提供给搜索引擎看的
里面有两个重要属性:name和http-equiv
name: 有两个关键词 :keywords,description
http-equiv:
定义网页所使用的编码
<meta charset =“utf-8”/>
定义网页自动跳转
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
- style: 定义元素的CSS样式
- script:定义页面的
JavaScript
代码,也可以引入外部JavaScript
文件 - link:从外部引入CSS样式文件
- base:无意义
body
<body>
标签表示页面的“身体”
防止页面出现乱码
注释
<!--注释内容-->
文本介绍
在HTML中,有6个级别的标题标签,h1~6,h1重要性最高,h6最低
一个页面一般只有一个h1标签,h2~h6标签可以有多个
h1与title的区别在于:
h1 表示文章的标题
title 表示该网页的标题
动态页面
动态页面与静态页面的区别在于:是否与服务器进行数据交互
以下四种不一定是动态页面
- 带有视频和音频
- 带有flash动画
- 带有CSS动画
- 带有JavaScript特效
水平线标签 <hr/>
这是换行标签
<br>
分区标签
<div>
划分区域,然后结合CSS针对该区域进行样式控制
自闭合标签
😀一般标签:由于有开始符号和结束符号,因此可以在内部插入标签或文字
😀自闭合标签:只有开始符号没有结束符号,不可在内部插入标签或文字
块元素与行内元素
HTML内元素表现形式一般分2类
😀块元素:独占一行,排斥其他元素(包括块元素和行内元素)与其同一行
-
内部可以容纳其他块元素和行内元素
块元素:
<h1>
~<h6>
,<div>
,<ul>
,<ol>
,<li>
,<p>
😀行内元素:可以与其他行内元素位于同一行
行内元素:
<a>
,<b>
,<em>
,<i>
,<span>
,<sup>
,<sub>
,<br>
特殊符号
网页内特殊符号对应的代码都是以 &
开头,并且以 ;
结尾 例如:  
列表
😁列表分为有序列表,无序列表,定义列表
- 有序列表
有先后顺序,一般采用数字或字母作为顺序,默认采用数字顺序
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
- 无序列表
没有先后顺序,默认情况无序列表的符号为 “ ○”
ul的子元素只能是li,不能是其他元素
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
- 定义列表
由两部分组成:名词和描述,在某些高级效果(自定义表单)会用到
<dl> <dt>名词</dt> <dd>描述</dd> </dl>
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言,控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表,控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言,控制网页的行为</dd>
</dl>
最后效果:
HTML
制作网页的标准语言,控制网页的结构
CSS
层叠样式表,控制网页的样式
JavaScript
脚本语言,控制网页的行为
- type属性
一般情况 ,改变type属性来改变列表项符号
<ol type="a"> <!--会变成字母顺序的有序列表-->
<ul type="circle"> <!--会变成“○”的无序列表-->
1 | 数字有序列表 |
---|---|
a | 小写英文字母列表 |
A | 大写英文字母列表 |
i | 小写罗马数字列表 |
I | 大写罗马数字列表 |
disc | “●“ |
circle | “○” |
square | “■” |
HTML语义化
<div>1.html</div> <!--没有语义化-->
<div>2.css</div>
<div>3.javascript</div>
<div>4.jquery</div>
<div>5.vue.js</div>
<hr>
<ol type="1"> <!--语义化-->
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
<li>vue.js</li>
表格
表格有三个部分组成:
- 表格:table
- 行: tr
- 单元格:td
默认情况下,表格没有边框。其中表格边框、颜色、大小都是由CSS控制
表格的完整结构一般有:<table>
,<tr>
,<td>
,<caption>
,<th>
<!--表格基本结构-->
<table>
<caption>标题</caption>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<td>
和<th>
的区别:
显示上:浏览器会以“粗体”和“居中”来显示标签的内容,但是标签不会
语义上:标签用于表头,而标签用于表行
表格语义化
- 表示表头,表示表身,表示表脚
使表格代码更具可读性,逻辑性,可维护性
合并行
-
使用rowspan属性合并行,纵向合并n个单元格。
<td rowspan="跨越的行数">内容</td>
-
使用colspan属性来合并列,横向合并n个单元格。
<td colspan =“跨越的列数">内容</td>
表单
表单:指的是文本框,按钮,单选框,复选框,下拉列表等统称
input
标签
text
表示单行文本框password
表示密码文本框radio
表示单选框checkbox
表示多选框file
表示文件上传
<form action="" name="123" method="GET" target="">
<!--单行文本框-->
<input type="text" value="" placeholder="输入文本"><br>
<input type="number" value="" placeholder="输入数字"><br>
<!--密码文本框-->
<input type="password" placeholder="输入密码"><br>
<!--单选框-->
<input type="radio" name="组名" value="取值" checked/>男生
<input type="radio" name="组名" value="取值" />女生
<!--多选框--><br />
<input type="checkbox" name="组名" value="取值">爱好1
<input type="checkbox" name="组名" value="取值">爱好2
<!--按钮--><br />
<input type="button" value="这是普通按钮button">
<br />
<input type="submit" value="这是提交按钮submit"><br />
<input type="reset" value="这是重置按钮reset"><br>
<!--下拉列表-->
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select><br>
<textarea cols="30" rows="5">多行文本框</textarea>
</form>