HTML学习笔记

来源：互联网发布：手机监听监控定位软件编辑：程序博客网时间：2024/05/16 06:49

学习笔记

一、语义化：合理使用标签

二、结构

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

三、标签

1、body ：网页显示的内容

2、p ：文章段落

3、hx ：标题

4、em （斜体）和 strong（粗体）：强调语气

5、span ：为文字单独设置样式

6、q ：引用一句话会自动给话语加 “”

7、<blockquote>：长引用，浏览器解析为缩进不会加“”

8、<br/>：转行

9、 &nbsp：空格

10、<hr/> :分隔横线

11、address：地址，斜体显示

12、code（短） pre（长）都用来显示代码，格式保留。Pre也可用于预格式

13、ul-li：是没有前后顺序的信息列表

14、ol-li :有序信息 ol>.item&*10 建立10行class=item的ol-li标签

15、div：逻辑部分，它是页面上相互关联的一组元素。如网页中的独立的栏目版块 属性：id唯一标识

16、创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

7、caption为table表添加标题

8、table的属性summary（摘要）不会在浏览器显示出来

17、a标签的target属性：

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

framename

在指定的框架中打开被lian接文档

18、a标签的mailto属性，第一个参数必须以？隔开，之后的以&间隔

19、<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

四、form表单用于向服务器传输数据

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

1、<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含

menus：

textarea：文本输入域，有属性cols=”行数”rows=”列数”，可以在css里重新设置

fieldset：

legend：

Lable：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

select：多选框

1、value：

2、option属性值：selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

3、Select属性值：multiple="multiple"：

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能

0 0