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