前言
- 该笔记是学习 黑马Pink老师的的HTML+CSS基础课程所记录的，纯手码~若对您有帮助，请给个赞，谢谢！
- 相关视频：前端Html5+Css3+移动Web教程，前端Web入门教程，零基础前端开发视频教程
- 课程相关代码已上传到个人
Github，如有需要请自取：Github版HTML+CSS笔记和代码
各章节笔记对应链接：
HTML - 笔记
1 HTML介绍
定义：html是一门标签语言，非常简单
1.1 标签
- 包含于一对尖括号< >
- 一般成对出现（双标签），第二个标签是结束标签
- 有些特殊标签是单个的，（较少，如换行
<br/>）
1.2 关系：包含、并列
基本结构标签：
<html> </html>—— 根标签<head> </head>——文档头部（须设置title）<title> </title>——文档标题<body> </body>——文档主体（页面内容）
<！DOCTYPE.html> —— 文档类型声明（位于文档最前）
<html lang="en"> —— 定义语言（en —英文，zh-CN —中文）
<meta charset = "UTF-8"> ——字符集，统一用UTF-8
2 标签
2.1 基本标签
（1）标题标签（共6级）：<h1> </h1> —— <h6> </h6>
（2）段落标签：<P> </P>
（3）换行标签：<br/>
（4）文本格式标签：
- 粗体
<strong></strong> - 斜体
<em></em> - 删除线
<ins></ins> - 下划线
<del></del>
（5）注释：<!-- 文字 -->
- 可以使用用快捷键
ctrl+ /（添加、取消注释）
（6）特殊字符（记三个）： (空格) <(小于) >(大于)
（7）盒子标签 （用于布局）：两种
<div></div>—— division缩写，表示分区<span></span>—— 跨距，跨度
（7）图像标签：<img src="图像URL">
- src是img必须写的属性，指定文件名、路径
- 其它属性（写在src后）：
属性 = "值"alt——替换文本（图片不显示时，显示的内容）title——提示文本（鼠标放在图片上时 显示）width——宽度（一般宽和高，只设置一个）height——高度border——图像边框粗细（一般用CSS设计）
路径：
（1）相对HTML文件位置：相对路径
- 同一级路径：
src = “图片名.JPG” - 下一级：
src = "文件夹名/图片名.JPG" - 上一级：
src = "../图片名.JPG"
（2）绝对路径（较少使用）：
src = "文件位置 \ 图片名.JPG"src = "网络图片地址"（直接网上复制地址）
2.2 超链接标签
（1）超链接标签：<a href = "跳转目标" target =“窗口弹出方式">文本或图像</a>
href = "指定链接的url地址（必须属性）"target = 页面打开方式：_self为默认值（当前页打开）_blank为新窗口打开
链接分类：
- 外部链接：
http://网址 - 内部链接：网站页面间的链接，直接写名称即可
- 如：
demo.html（demo为文件名，html为后缀）
- 如：
- 空链接：
href = "#" - 下载链接：
href = "···.exe"或"···.zip" - 网页元素链接：文本、图片等都可添加超链接
- 锚点链接：点击可快速定位页面中某位置
href = "#名字"，并在需要被跳转处加id = "名字"
2.3 表格标签（展示数据）
（1） 语法：
<table>
<tr>
<td> 单元格内文字 </td>
</tr>
</table>
注：table 定义表格，tr 定义行，td 单元格
<th></th>——表头单元格（加粗居中）<thead></thead>——表头，<tbody></tbody>——表格主体
（2） 表格属性（一般用CSS）：
- align(对齐方式)：
left、center、right - border(边框)：默认无，可改为1（粗细）
- cellpadding(像素)：单元格到其内容的空白，默认1
- cellspacing(像素)：单元格间空白，默认2
- width(宽度)：可不设置
（3）合并单元格：
- 跨行合并
rowspan = "合并个数" - 跨列合并
colspan = "合并单元格个数"
目标单元格（写合并代码的单元格）：
- 跨行（最上侧为目标单元格）
- 跨列（最左侧为目标单元格）
合并三部曲：
- 确定跨行 / 列
- 找到目标单元格，写合并代码，如
<td colspan = "2"</td> - 删除多余单元格
2.4 列表标签（用于布局）
（1） 无序列表（重要）
- 语法：
<ul></ul>表列表，列表项用<li></li>；如：
<ul>
<li>...</li>
<li>...</li>
</ul>
- 注：
ul中只能嵌套li，且必须嵌套li才能输出内容，但li可嵌套其它东西<li>相当于一个容器，可容纳所有元素- 各列表项并列，无顺序之分
- 无序列表有属性，但一般用CSS修饰
（2）有序列表（理解即可）
- 如：
<ol><li>...</li></ol>
（3）自定义列表：
-
前面无项目符号，用于对术语/名词进行解释和描述（一个
dt对应多个dd） -
语法如下：
<dl>
<dt>...</dt><dt>...</dt>
<dd>...</dd><dd>...</dd>
<dd>...</dd><dd>...</dd>
</dl> -
注：
<dl>—定义自定义列表<dt>—定义项目（类似表头）<dd>—围绕dt进行说明
(4）去掉列表前的小圆点 ——list-style: none;
2.5 表单标签（用于收集用户信息）
- 组成：表单域、表单控件（表单元素）、提示信息 —— 三部分组成
（1）表单域：<form></form> —— 将信息传给服务器（后台）
属性：action = "url地址"，method = "提交方式"，name = "表单域名称"
（2）表单控件
- ①
input输入表单元素，单标签
<input type="属性值"/>，type属性值指定不同控件类型，如：text— 文本框password— 密码框submit— 提交按钮reset— 重置按钮button— 定义可点击按钮（多数用于JS启动脚本）file— 上传文件radio— 单选按钮（需有相同的name值）checkbox— 复选框，可多选（需有相同的name值）
注： 在radio、checkbox中 定义属性 checked = "checked"，可将该项作为为默认选择项
label标签：点击label标签中的文字，自动选择对应表单元素（标注标签，常与input搭配使用），语法：
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex"/>
<!--label的 for 对应于input的 id 属性-->
-
②
select下拉表单元素（节约空间），语法如下：
<select>
<option>选项1..</option>
<option>选项2..</option>
</select>- 注：
select至少包含一对option - 添加属性
selected = "selected"即为默认项（option标签中添加）
- 注：
-
③
textarea文本域元素（输入内容多，多元文本输入控件）
语法：<textarea>....</textarea>
总结：
-
表单元素（
input、select、textarea）都要写在form中，并有自己的name属性 -
现阶段注重外观（无需提交），写在form中才能提交（现阶段可先不写）
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
