本文详细介绍了HTML的基础知识，包括Web概念、HTML的定义及其发展历史、浏览器内核、WEB标准、HTML标签的使用，如标题、段落、换行、文字样式、图像、超链接、表格、表单等。同时讲解了路径处理、SEO优化以及一些特殊字符和列表标签的运用。此外，还涵盖了表单元素的创建，如输入框、单选按钮、多选框、下拉列表等。
HTML 知识点 总结
1、WEB概念
● Web是一个简写，World Wide Web 万维网
2、网页、网站、HTML
● 网页
○ 网页是指因在因特网根据一定的规则展示特定内容的数据
● 网页的构成
○ 图片、文字、声音、视频等元素组成
● 网站
○ 网站是多个网页和其他文件组成的
● HTML （Hyper Text Markup Language）
○ 指的事超文本标记语言，它是用来描述网页的一种语言，带哦你有标签格式的一种标记语言
HTML发展历史
● HTML5是一个新的HTML版本，增加了一些标签和功能。
3、浏览器
常见浏览器内核
● 浏览器内核负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
4、WEB标准
● WEB标准是由WEC组织和其他标准化组织制定的一系列标准的集合
WEB标准的组成
○ 结构 - HTML
○ 表现 - CSS
○ 行为 - JavaScript
5、HTML标签
● HTML标签是由尖括号包围的关键字 <标签名></标签名>
● HTML标签通常是成对出现的，称为双标签，一个开始标签，一个结束标签
标签关系
○ 包含关系
○ 并列关系
<!-- 包含关系 -->
<标签1>
<标签2> </标签2>
</标签1>
<!-- 并列关系 -->
<标签1> </标签1>
<标签2> </标签2>
网页基本骨架
● ：根标签
● ：头部标签
●
● ：主体标签
● : 声明文档的类型，告诉浏览器使用哪种HTML版本来显示网页
● charset：编码设置
○ utf-8是最常用的字符编码方式，常用的还有GBK、GB2312
○ GB2312 简单中文，包括6763个汉字
○ GIG5 繁体中文，港澳台等用
○ GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
○ UTF-8包含全世界所有国家需要用到的字符
● SEO搜索引擎优化 - 让爬虫搜索到的关键词和描述信息
○
○
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meat name = "keywords" content = "Day Day Study">
<meta name = "description" content = "This is description">
<title></title>
</head>
<body>
</body>
</html>
5.2 HTML路径问题
● 路径分为相对路径和绝对路径
● 相对路径
○ 以引用文件所在位置为参考基础，而建立的目录文件
○ 相对路径是从代码所在的这个文件出发，去寻找目标文件的
● 绝对路径
○ 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始
HTML常用标签
（1）标题标签 h1 - h6
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
（2）段落标签 p
<body>
<p>我是段落标签p</p>
</body>
（3）换行标签 br
<body>
我是内容准备换行了<br>是不是哦
</body>
（4）文字 加粗、倾斜、删除、下划线标签
<body>
<strong>我是加粗标签</strong>
<br>
<b>我是加粗标签2</b>
<br>
<em>我是倾斜标签</em>
<br>
<i>我是倾斜标签2</i>
<br>
<del>我是删除线标签</del>
<br>
<s>我是删除线标签2</s>
<br>
<ins>我是下划线标签</ins>
<br>
<u>我是下划线标签2</u>
</body>
````
（5）div、span标签
● div标签用来布局，但一行只能放一个div
● span标签用来布局，一行可以放多个盒子
<body>
<div>我是div标签</div>
<span>我是span标签</span>
</body>
（6）图像标签 img
● 图像标签
● 属性
○ src= “图片的路径”
○ width = “图片的宽度”
○ htight = “图片的高度”
○ border = “图片的边框大小”
○ title = “图片的提示内容”
○ alt = “替换文本，当图片不存在时候，进行提示”
<body>
<img src="./img/xiongda1.png" s
width="200px" height="200px" border="5" title="我是熊大" alt="服务器在维护中">
</body>
（7）超文本标签 a
● 属性
○ href = “用于指定跳转的目标URL地址”
■ #表示跳转到当前页面 < a href="#"> 首页 。
○ target = “指定跳转页面的打开方式”
■ _self默认值，自身页面打开
■ _blank ，新窗口打开
<body>
<a href="https://www.baidu.com" target="_blank"> 我是超文本标签</a>
</body>
● 锚点标签
● 点我们点击链接,可以快速定位到页面中的某个位置.
● a标签的href用#id名称就可以跳转到那个标签
<p id="one"> 内容 </p>
<a href="#one">锚点标签跳转</a>
（8）表格标签 table
● <table> <table> 表格标签
● <tr> </tr> 行标签
● <td> <td> 单元格标签
● <th> </th> 表头标签
● <caption></caption>表格标题标签
● 属性
○ border= "表格边框大小"
○ width = "表格宽度"
○ height = "表格高度"
○ align ="表格对其方式"
○ cellpadding = "列之间的内边距"
○ cellspaing = "列之间的间距"
<body>
<table border="1" cellpadding="0dp" cellspacing="0dp" width="600px" height="300px" align="center" >
<caption>表格标题</caption>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<!-- 第一行 -->
<tr align="center">
<td >第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
<!-- 第二行 -->
<tr align="center">
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
</table>
</body>
● rowspan：跨行操作 竖着的是跨行
● colspan：跨列操作 横着的是跨列
<table width="500px" border="1px solid" align="center" cellpadding="0dp" cellspacing="0dp">
<!-- 表格标题 -->
<caption>
<h1>课程表</h1>
</caption>
<tr style="background-color: red;">
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr style="background-color: aqua;">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
</table>
（9）分割线标签 hr
<body>
content
<hr>
content
</body>
(10) 特殊字符标记
(11) 列表标签
有序列表 ol
<body>
<ol>
<li>我是有序列表</li>
<li>我是有序列表2</li>
</ol>
</body>
无序列表
<body>
<ul>
<li>我是无序列表</li>
<li>我是无序列表2</li>
</ul>
</body>
自定义列表
<body>
<dl>
<dt>我是自定义列表</dt>
<dd>content</dd>
<dd>content</dd>
</dl>
</body>
（12）表单标签
● 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成
● 在 HTML 标签中， 标签用于定义表单域，以实现用户信息的收集和传递。
● 会把它范围内的表单元素信息提交给服务器.
● 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型
● 除 type 属性外，标签还有其他很多属性，其常用属性如下：
●
<form action="#">
<label for="username">姓名：</label>
<input id="username" type="text">
<br>
<label for="password">密码：</label>
<input type="password" id="password">
<br>
性别：
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
国籍：<select name="" id="">
<option value ="" >中国</option>
<option value ="">日本</option>
<option value ="" selected>韩国</option>
<option value ="">泰国</option>
</select>
<select>
<optgroup label="这只是个标题">
<option value ="" >中国</option>
<option value ="">日本</option>
<option value ="" selected>韩国</option>
<option value ="">泰国</option>
</optgroup>
<optgroup label="这只是个标题">
<option value ="" >中国</option>
<option value ="">日本</option>
<option value ="" selected>韩国</option>
<option value ="">泰国</option>
</optgroup>
</select>
<br>
你的兴趣爱好是:
<input type="checkbox" name="xingqu1">抽烟
<input type="checkbox" name="xingqu1">喝酒
<input type="checkbox" name="xingqu1">唱歌
<br>
公司简介：<textarea></textarea>
<br>
<input type="button" value="按钮">
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<!-- 默认是submit 提交按钮 -->
<button type="submit">按钮</button>
</form>
后续更新!!!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
