一、HTML的相关认识
1.1、HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)。
1.2、网页
- 网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
- 网页生成制作: 编写 HTML 文件, 然后浏览器打开,展示网页.
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件。
1.3、web标准
解释：Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
构成：包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三部分。
简单理解：结构（身体）写到 HTML 文件， 表现写到 CSS 文件， 行为写到 JavaScript 文件。
基础决定上层，有了结构（身体）才能去表现和行为，所以结构是较后两者重要的。
1.4、HTML标签
1.4.1、HTML中的标签通常为双标签，但也有少数特殊的标签
例如：<br/>是单标签
1.4.2、双标签的关系
双标签的关系可以分为两类：包含关系和并列关系
包含关系（父子）：<head></head>标签包含 title1 和 title2。
并列关系（兄弟）：title1 和 title2 是同一个父亲的两个孩子。
1.4.3、基本标签（也称骨架标签）
页面内容是在这些基本标签上书写
拓展：
（1）<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。
（2）lang 语言种类
- 用来定义当前文档显示的语言。
- en定义语言为英语，定义为en 就是英文网
- zh-CN定义语言为中文，定义为 zh-CN 就是中文网页
（3）字符集
- 字符集 (Character set)是多个字符的集合。
- 在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
- charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
- 上述代码是必须要写的代码，可以快捷显示（Ctrl+!(英文)+enter），否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码（不要编写错误）。
1.4.4、语义化标签
学习标签的重点是记住每个标签的语义，知道这个标签的作用。
但也有没有语义的标签：<div> 和 <span> 是没有语义的
二、表格
2.1、表格理解
表格用来展示数据的，并非是用来布局页面的。
具体实现：
<table>
<tr>
<th>表头</th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th>表头</th>
<td>内容</td>
<td>内容</td>
</tr>
...
</table>- <table> </table> 是用于定义表格的标签。
- <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table> 标签中。
- <th> 标签表示 HTML 表格的表头部分(table head 的缩写)，位于表格的第一行或第一列，文字会加粗居中。
- <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr> 标签中。
- 字母 td 指表格数据（table data），即数据单元格的内容。
2.2、表格属性
表格属性通常通过CSS来设置
具体实现：
<table width="200px" border="1" align="right" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
...
</tbody>
</table>
-
<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。 <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。- 以上标签都是放在
<table></table>标签中。
三、列表
3.1、列表分类
列表分为无序列表、有序列表、自定义列表
3.1.1、无序列表
具体实现：
<ul>
<li>看看我是不是无序列表</li>
<li>判断一下我是否是无序列表</li>
<li>无序列表长什么样</li>
<li>无序列表长这样</li>
</ul>
1、无序列表的<li>之间是并列存在的
2、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。3、<li>与 </li>之间相当于一个容器，可以容纳所有元素
4、无序列表会带有自己的样式属性，在实际开发中，我们会使用 CSS 来设置。
3.1.2、有序列表
具体实现：
<ol>
<li>有序列表长什么样</li>
<li>有序列表就是这样</li>
<li>记住有序列表</li>
</ol>
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与 </li>之间相当于一个容器，可以容纳所有元素。
3. 有序列表会带有自己样式属性，但在实际开发中，我们会使用 CSS 来设置。
3.1.3、自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在 HTML 标签中，<dl> 标签用于定义列表，该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
语法：
<dl>
<dt>名词1</dt>
<dd>名词1 解释1</dd>
<dd>名词1 解释2</dd>
<dd>名词1 解释3</dd>
</dl>
四、表单
4.1、表单的组成
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成
4.1.1、表单域
表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域。
语法：
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>表单域常用属性
4.1.2、表单控件
4.1.2.1、<input> 表单元素
表单元素中 <input> 标签用于收集用户信息。
语法：
<input type="属性值" />type 属性的属性值：
<input>的其他属性值：
4.1.2.2、<select> 表单元素
在页面中，如果有多个选项选择，并且想要节约页面空间时，我们可以使用`<select>`标签控件定义下拉列表。
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>4.1.2.3、<textarea>表单元素
- 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 `<textarea>` 标签。
- 在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
- 使用多行文本输入控件，可以输入更多的文字。
- cols=“每行中的字符数” ，rows=“显示的行数”。
语法：
<textarea rows="3" cols="20"> 文本内容 </textarea>
扫一扫
2655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
