HTML+CSS基础课程学习笔记-第二章 HTML标签

来源：互联网发布：淘宝虚拟商品编辑：程序博客网时间：2024/04/28 20:27

最近在慕课网上自学前端，课程名：html+css基础课程课程地址：http://www.imooc.com/learn/9

现将笔记整理如下（第二部分）：

第二章 HTML标签

标签语义化优点：
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
一般常用标签：
1. 段落标签：注意一个段落就要用一个p标签
2. 斜体标签：<em> 表示强调
3. 粗体标签：<strong> 表示更强调，国内常用粗体表示强调-更多的用CSS样式来加粗，不用这个
4. <span>标签：是没有语义的，它的作用就是为了设置单独的样式用的
5. 引用标签：
  1. 短文本：<q> 表示引用别人的话(短文本)，页面默认会现实成双引号
  2. 长文本：<blockquote> 页面格式为缩进
6. 换行标签：html不识别回车和空格，所以要用换行标签
  1. xhtml1.0写法：<br />(常用)
  2. html4.01写法： <br>
7. 空格：  (注意要有后面的分号)
8. 空标签：只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。
9. 分割线标签：<hr/>
10. 地址标签：<address> 默认样式为斜体
11. 代码标签：
  1. 一行代码：<code>
  2. 多行代码：<pre> 主要作用是预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
    1. 注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
12. 列表标签：
  1. 无序列表：
  2. 有序列表：
13. div标签：<div id="板块名称">....</div> 作为容器放置一个独立的逻辑部分
14. 表格标签：
  1. 基本四要素：
    1. <table>…</table>：整个表格以<table>标记开始、</table>标记结束。
    2. <tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
    3. <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
    4. <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
    5. <th>…</th>：表格的头部的一个单元格，表格表头。
  2. 注意：
    1. table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
    2. 表头，也就是th标签中的文本默认为粗体并且居中显示
  3. 标题：<caption></caption> 显示位于表格正上方
  4. 摘要：<table summary="摘要内容">...</table>
    1. 不会在页面中显示出来，用于增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
15. <a>标签：实现超级链接
  1. 语法：<a href="目标网址" title=“鼠标滑过显示的文本(方便搜索引擎了解链接地址的内容（语义化更友好）)”></a>
  2. 注意：
    1. 默认情况下，链接的网页是在当前浏览器窗口中打开
    2. 在新窗口打开链接：<a href="目标网址" target="_blank">...</a>
  3. mailto标签：用于发送点击后发送邮件
    2. 注意：
      1. 如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
      2. 实例：
16. <img>标签：
  1. 语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
  2. 讲解：
    1. src：标识图像的位置；
    2. alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
    3. title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
    4. 图像可以是GIF，PNG，JPEG格式的图像文件。
表单标签：表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
1. 语法：<form method="传送方式" action="服务器文件">
2. 讲解：
  1. <form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
  2. action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
  3. method ：数据传送的方式（get/post）。
3. 注意：
  1. 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
  2. method：post/get的区别这一部分内容属于后端程序员考虑的问题。
4. 文本输入框：
  1. <input type="text/password" name="名称" value="文本" />
  2. 讲解：
    1. type:
      1. 当type="text"时，输入框为文本输入框;
      2. 当type="password"时, 输入框为密码输入框。
    2. name：为文本框命名，以备后台程序ASP 、PHP使用。
    3. value：为文本输入框设置默认值。(一般起到提示作用)
5. 文本域：支持多行文本
  1. 语法：<textarearows="行数"cols="列数">文本</textarea>
  2. 注意：
    1. <textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
    2. cols ：多行输入域的列数。
    3. rows ：多行输入域的行数。
    4. 注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替
    5. 在<textarea></textarea>标签之间可以输入默认值。
6. 单选框、复选框：
  1. 语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
  2. 讲解：
    1. type:
      1. 当type="radio"时，控件为单选框
      2. 当type="checkbox"时，控件为复选框
    2. value：提交数据到服务器的值（后台程序PHP使用）
    3. name：为控件命名，以备后台程序ASP、PHP使用
    4. checked：当设置checked="checked"时，该选项被默认选中
  3. 注意：注意:同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
7. 下拉列表框：
  1. 语法：
  2. 讲解：
    1. value：
    2. selected="selected"：
    3. 设置selected="selected"属性，则该选项就被默认选中。
  3. 注意：在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项
8. 按钮：
  1. 提交按钮：
    1. 语法：<inputtype="submit"value="提交">
    2. 讲解：
      1. type：只有当type值设置为submit时，按钮才有提交作用
      2. value：按钮上显示的文字
  2. 重置按钮：
    1. 语法：<inputtype="reset"value="提交">
9. label标签：
  1. 作用：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
  2. 语法：<label for="控件id名称">
  3. 注意：注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

0 0