前端html入门笔记
网页的组成：
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
什么是HTML：
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
常用的浏览器
IE 火狐(推荐) 谷歌 苹果 欧朋
浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
HTML语法规则：
1.HTML 标签/标记是由尖括号包围的关键词，例如 <html>。
2.HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。
3.标签对中的第一个标签是开始标签，第二个标签是结束标签。 有些特殊的标签必须是单个标签（极少情况），例如 <hr />，我们称为单标
HTML基本骨架：
标题标签
**标题标签 <h1> - <h6>（重要）**
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。
具体实现：
<h1> 我是一级标题 </h1>
特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
段落标签：
<p> 我是一个段落标签 </p>
特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
换行标签
<br />
特点：
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签：
div和span标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
具体实现：
<div> 这是头部 </div>
<span> 今日价格 </span>
特点：
1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
图片标签：
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
具体实现：
<img src="图像URL" />
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
链接标签：
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
1.href：用于指定链接目标的url地址
2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
3.#：空链接
<!-- 注释语句 --> 快捷键: ctrl + /
表格
表格的主要作用
表格的具体用法：
合并单元格方式：
跨行合并：rowspan="合并单元格的个数"
最上侧单元格为目标单元格, 写合并代码
跨列合并：colspan="合并单元格的个数"
最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲：
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。
比如：<td colspan="2"></td>。删除多余的单元格。
表格总结
表格学习整体可以分为三大部分:
表格的相关标签
table thead body tr th td
表格的相关属性
cellspacing cellpadding width height border
合并单元格
rowspan collspan
列表
1.无序列表
有序列表
<ol>
<li> </li>
<li> </li>
</ol>
自定义列表
表单
<form> 表单域
... 表单控件
</form>
「input 之 type 属性文本框和密码框」重点
表单控件包含以下三大类：
1. input 输入
2. select 选择
3. textarea 文本域
「input 之 type 属性提交和重置按钮」
「input 之 type 属性单选按钮和复选框」重点
在多选一的时候，使用单选框（radio），例如：性别；
在多选多的时候，使用复选框（checkbox)，例如：爱好。
input 标签的常用属性：
「label 标签」重点
label 可以和表单中的元素绑定，增加点击范围，提高用户体验；
「select 下拉表单」重点
<select>
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
...
</select>
「textarea 文本域标签」重点
<textarea></textarea>
发表评论 (审核通过后显示评论)：