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>
最后
以上就是花痴薯片最近收集整理的关于前端之HTMLHTML的全部内容，更多相关前端之HTMLHTML内容请搜索靠谱客的其他文章。
发表评论 取消回复