HTML学习笔记

来源：互联网发布：类似origin的软件编辑：程序博客网时间：2024/06/03 16:12

一、概述

1、Web是基于没有任何特殊格式字符的文本文件创建的。

2、Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面，并根据HTML和CSS显示网页的内容。

3、HTML（HyperText Mark Language，超文本标记语言）是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

4、CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

5、JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

二、标签

（一）概述

1、标签（标记）是由尖括号括起来的词或字符，它会告诉浏览器文本结构和含义。如<head>、<p>、<h1>。

2、html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。如<p></p>。

3、通过HTML，我们利用标记来标示内容提供结构。把匹配标记以及它们包围的内容称为元素。
元素=开始标记+内容+结束标记。

4、开始标记可以有属性。比如<style type="text/CSS"></style>中的type属性。

5、标签与标签之间是可以嵌套的，但先后顺序必须保持一致。

6、HTML标签不区分大小写，<h1>和<H1>是一样的，但一般都是小写。

7、html文件的一般结构如下：

<!DOCTYPE html><html>    <head>        <title>...</title>        <meta charset="utf-8">        <style>...</style>        <link>    </head>    <body>        <script>...</script>    </body></html>

【注】<!DOCTYPE html>表示的就是HTML5标准。

（二）一些标签的含义

1、<html></html>称为跟标签，所有的网页标签都在<html></html>中。这会告诉浏览器文件内容是HTML。

2、<head>标签：用于定义文档的头部，它是所有头部元素的容器。

文档的头部描述了文档的各种属性和信息，包括文档的标题等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
头部元素有<title>、<script>、<style>、<link>、<meta>等标签。

3、<title>标签：添加网页的标题信息。

4、<body>标签：添加网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标记中的内容会在浏览器中显示出来。

5、<hx>标签：标题标签一共有6级，<h1>到<h6>，字体由大到小，分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。

6、<p>标签：添加文章段落。

7、代码注释：标注代码的用途。

8、<a>标签：实现超链接。

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

【说明】
1）默认情况下，链接的网页是在当前浏览器窗口中打开。
使用target可以使链接的网页在新窗口中打开。

<a href="目标网址" target="_blank">click here!</a>

2）使用mailto在网页中链接Email地址。

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

9、<img>标签：插入图片。图片可以是GIF，PNG，JPEG格式的图像文件。

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

【关于`<img>`和`<a>`中的图片路径问题】1）当图片位于任意路径时，都使用“绝对路径+图片名+后缀”的形式；2）当图片位于当前路径下，可以直接使用“图片名+后缀”的形式，可以不用加上路径；3）当图片位于上一级时，可以使用“../上一级路径名+图片名+后缀”的形式；4）当图片位于下一级时，可以使用“相对路径+图片名+后缀”的形式。通常情况下，将网页中所需要的图片放置在同一个文件夹，命名为images，再将images这个文件夹放在建立的总的工程文件夹中。采用这种方式时，属于图片位于下一级的情况，这时可以使用相对路径的形式。

10、<em>标签：表示强调，用斜体表示。

11、<i>标签：显示斜体文本效果。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。和 <em> 类似。

12、<strong>标签：表示更强烈的强调，用粗体表示。

13、<b>标签：规定粗体文本。

【HTML5规范声明
应该使用<h1>-<h6>来表示标题，使用<em>标签来表示强调的文本，应该使用<strong>标签来表示重要文本，应该使用<mark>标签来表示标注的/突出显示的文本。在没有其他合适标签更合适时，才应该把<b>标签作为最后的选项。

14、<span>标签：没有语义，它的作用就是为文字设置单独样式。

15、<q>标签：短文本引用，浏览器会自动添加双引号。

16、<blockquote>标签：长文本引用，缩进样式。

17、<br>标签：分行显示文本，相当于Word文档中的回车换行。

xhtml1.0写法：`<br/>`html4.01写法：`<br>`

18、空格： （注意末尾必须带有;）。

【注】在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br/>。

19、<hr>标签：添加水平横线。

20、<address>标签：为网页加入地址信息。

21、<code>标签：一行代码。

22、<pre>标签：多行代码、大段代码。主要作用是预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

23、<ul>标签：ul-li是没有前后顺序的信息列表。
在网页中显示的默认样式一般为：每项li前都自带一个圆点。

24、<ol>标签：制作有序列表。
在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。

25、<div>标签：划分独立的逻辑部分，相当于一个容器。

26、表格

<table>    <caption>标题文本</caption>    <thead>    <tr>      <th>...</th>      <th>...</th>    </tr>  </thead>  <tbody>    <tr>      <td>…</td>       <td>…</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>…</td>       <td>…</td>    </tr>  </tfoot></table>

1）<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2）不加<thead><tbody><tfooter>时，table表格加载完后才显示。加上这些表格结构，tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table可以按结构一块块的显示，不等整个表格加载完后显示。）
3）<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4）<td>…</td>：表格的一个单元格，一行中包含几对…，说明一行中就有几列。
5）<th>…</th>：表格的头部的一个单元格，表格表头。
6）<caption>：为表格添加标题和摘要。

27、表单：作用是实现网站与用户交互。可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form action="服务器文件" method="传送方式"></form>

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在之间，否则用户输入的信息提交不到服务器上。

action ：服务器脚本URL。
method ：数据传送的方式（get/post）。
- get：表单数据会追加到URL本身，用户可以看见表单数据。
- post：所有表单数据会作为请求的一部分发送，对用户不可见。

1）文本输入框（单行）

<input type="text" name="名称" value="文本（默认值）"/>

除了基本的文本输入，还可以设置特定的输入类型，比如number、date、password等。

2）文本输入域（多行）

<textarea rows="行数" cols="列数">文本</textarea>

3）单选按钮和复选按钮

<input type="radio" name="名称" value="值" checked/><input type="radcheckbox" name="名称" value="值" checked/>

所有关联的单选按钮（或复选按钮）应该使用相同的name属性。
“checked”表示该选项被默认选中，可不写。

4）下拉列表

<select>    <option value="提交值（向服务器提交的值）">选项（显示的值）</option></select>

在标签中设置”multiple”属性，可以多项选择。

5）提交/重置按钮

<input type="submit" value="提交"><input type="reset" value="重置">

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

<label for="控件id名称">

【补充】

<fieldset>元素：将表单公共元素组织在一起。
- <filedset>元素包围一组输入（input）元素。
- <legend>为这一组提供一个标签。
文件输入，将<input>元素中的type类型设置为“file”。
placeholder属性：为表单用户提供一个提示，指出在这个输入域中希望输入的内容。
required属性：指示一个输入域是必要的，即在提交表单之前，必须输入数据。

阅读全文

0 0