menu
more_vert
HTML 基础学习笔记

作者:dayu

1、HTML 标签 (HTML tag),由尖括号包围的关键词(如 <html>),通常是成对出现的,比如 <b>(开始标签) 和 </b>(结束标签)。

2、HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

3、HTML 段落是通过标签 <p> 来定义的。

4、HTML 链接是通过标签 <a> 来定义的。如:

<a href="http://www.runoob.com">这是一个链接</a>

提示:在 href 属性中指定链接的地址。

5、HTML 图像是通过标签 <img> 来定义的。如:

  • <img src="/images/logo.png" width="258" height="39" />

注意:图像的名称和尺寸是以属性的形式提供的。

6、提示:使用小写标签。

二、基础内容

1、HTML 空元素:没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br/> 就是没有关闭标签的空元素(<br/> 标签定义换行)。

2、HTML属性:

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"
  • 属性值应该始终被包括在引号内。双引号是最常用的,单引号一般用于属性值本身就含有双引号,例如:name=‘John "ShotGun" Nelson‘。
  • 使用小写属性

 ①常用的标签属性:

  • <h1>:align对齐方式
  • <body>:bgcolor背景颜色
  • <a>:target规定在何处打开链接(新窗口、原窗口等)

 ②通用属性:

  • class:规定元素的类名
  • id: 规定元素的唯一ID
  • style:规定元素样式
  • title:规定元素的额外信息

3、HTML标题:

①标题(Heading)通过 <h1> - <h6> 标签进行定义的,<h1> 定义最大的标题。 <h6> 定义最小的标题。(浏览器会自动地在标题的前后添加空行。)

②HTML水平线:<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

③HTML注释格式示例:<!--这是一个注释-->;浏览器会忽略注释,也不会显示它们。

4、HTML段落

①段落是通过 <p> 标签定义的。如:

<p>这是一个段落 </p>

注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)

②HTML 折线

在不产生一个新段落的情况下进行换行(新行),使用 <br/> 标签。

<p>这个<br>段落<br>演示了分行的效果</p>

③、HTML输出—使用提醒:当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

5、HTML<head>
  ①HTML<head>元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
  ②HTML <title> 元素
  • <title> 标签定义了不同文档的标题。
  • <title> 在 HTML/XHTML 文档中是必须的。
  • <title> 元素:
    • 定义了浏览器工具栏的标题
    • 当网页添加到收藏夹时,显示在收藏夹中的标题
    • 显示在搜索引擎结果页面的标题
③HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。
④HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
⑤HTML <style> 元素
  • <style> 标签定义了HTML文档的样式文件引用地址.
  • 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
  • <head> <style type="text/css"> body {/style> </head>
  ⑥HTML <meta> 元素
  • meta标签描述了一些基本的元数据。
  • <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
  • META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
  • 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
  • <meta> 一般放置于 <head> 区域
  • 为搜索引擎定义关键词:
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 为网页定义描述内容:
  • <meta name="description" content="免费 Web & 编程 教程">
  • 定义网页作者:
  • <meta name="author" content="Runoob">
  • 每30秒中刷新当前页面:
  • <meta http-equiv="refresh" content="30">
⑦HTML <script> 元素
<script>标签用于加载脚本文件,如: JavaScript。

6、HTML 文本格式化

标签描述
<b>
定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small>
定义小号字
<strong>
定义加重语气
<sub> 定义下标字
<sup>
定义上标字
<ins>
定义插入字
<del>
定义删除字

7、HTML样式

①标签:

  • <style> : 样式定义
  • <link> : 资源引用

②属性:

  • rel="stylesheet":外部样式表
  • type="text/css" :引入文档类型
  • margin-left: 边距

③三种样式表插入方法:

  • 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式表:

<style type= "text/css">

body {">p{margin-left: 20px }

</style>

  • 内联样式表:<p style= "color:red">

8、HTML链接

  ①链接数据:

  • 文本链接
  • 图片链接

②属性:

  • href属性:指向另一个文档的链接
  • name属性:创建文档内的链接

  ③img标签属性:

  • alt : 替换文本属性
  • width:宽
  • hight: 高
  • 示例:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>链接</title>
 6 </head>
 7 <body>
 8     <a href="http://www.jikexueyuan.com/">点击我</a>
 9     <hr>
10     <a href="http://www.jikexueyuan.com/">
11         <img src="海葡萄.jpeg" width="200px" height="100px" alt="海葡萄">
12     </a>
13     <br/>
14     <a name="tips">hello</a>
15     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
16     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
17     <a href="#tips">跳转到hello</a>
18 </body>
19 </html>

9、HTML表格

标签描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

10、HTML列表

标签描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述

①无序列表

使用标签:<ul>、<li>

属性:disc、circle、square

②有序列表

使用标签:<ol>、<li>

属性:A、a、I、i、start

③嵌套列表

使用标签:<ul>、<ol>、<li>

④自定义列表

使用标签:<dl>、<dt>、<dd>

11、HTML块

①HTML块元素

块元素在显示时,通常会以新行开始

如:<h1>、<p>、<ul>

②HTML内联元素

内联元素通常不会以新行开始

如:<b>、<a>、<img>

③HTML<div>元素

<div>元素也被称为块元素,其主要是组合HTML元素的容器

④HTML<span>

<span>元素是内联元素,可作为文本的容器

⑤示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块元素</title>
 6     <link rel="stylesheet" type="text/css" href="my.css">
 7     <style type="text/css">
 8         span{
 9             color: red;
10         }
11     </style>
12 </head>
13 <body>
14     <!-- 块-->
15     <p>大家好!</p>
16     <h1>大家好</h1>
17     <b>这是一个加重标签</b>
18     <a>这是一个超链接</a>
19     <divsrc="http://image.mamicode.com/info/201707/20180111000128428524.png"  width="322" height="211">

②table布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table布局</title>
 6 </head>
 7 <body marginheight="0px" marginwidth="0px">
 8 <table width="100%" height="950px">>
 9     <tr>
10         <td colspan="3" width="100%" height="10%">>这是头部</td>
11     </tr>
12     <tr>
13         <td width="20%" height="80%">>左菜单
14             <ul>
15                 <li>ios</li>
16                 <li>android</li>
17                 <li>html5</li>
18             </ul>
19         </td>
20         <td width="60%" height="80%"></td>
21         <td width="20%" height="80%"></td>
22     </tr>
23     <tr>
24         <td colspan="3" width="100%" height="10%">>这是底部</td>
25     </tr>
26 </table>
27 </body>
28 </html>

显示效果:

技术分享

13、 HTML表单

①表单用于获取不同类型的用户输入

②常用的表单标签:

标签描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>
指定一个预先定义的输入控件选项列表
<keygen>
定义了表单的密钥对生成器字段
<output>
定义一个计算结果

③代码示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单</title>
 6 </head>
 7 <body>
 8       <form>
 9           用户名:
10           <input type="text">
11           密码:
12           <input type="password">
13           <br/>
14           喜欢的水果有?
15           <br/>
16           苹果<input type="checkbox">
17           香梨<input type="checkbox">
18           香蕉<input type="checkbox">
19           <br/>
20           请选择性别:
21           男<input type="radio" name="sex">
22           女<input type="radio" name="sex">
23           <br/>
24           请选择您常用的网站:
25           <select>
26               <option>jikexueyuan.com</option>
27               <option>www.google.com</option>
28               <option>www.iwen.org</option>
29           </select>
30           <input type="button" value="按钮">
31           <input type="submit" value="提交">
32       </form>
33       <textarea cols="30" rows="30">请在此填写个人信息</textarea>
34 </body>
35 </html>

14、HTML框架

①框架标签(frame):框架对于页面的设计有着很大的作用。

②框架标签(<frameset>)(已被替代):

框架及标签定义如何将窗口分割为框架

每一个frameset定义一系列行或列

rows/colsde 值规定了每行或每列占据屏幕的面积

③常用标签:

    • noresize: 固定框架大小
    • cols:列
    • rows:行

④内联框架(较为有用)

iframe

15、HTML背景

①背景标签:Background

②背景颜色:Bgcolor

③颜色:

颜色是由一个十六进制符号来定义,这个符号由红色、绿色、蓝色的值组成(RGB)

颜色值最小值:0(#00)

颜色值最大值:255(#FF)

红色:#FF0000

绿色:#00FF00

蓝色:#0000FF

16、HTML实体

在 HTML 中,某些字符是预留的,必须被替换为字符实体。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:

&entity_name;或&#entity_number;

如需显示小于号,我们必须这样写:&lt;&#60;&#060;

HTML 基础学习笔记

原文地址:http://www.cnblogs.com/gdwkong/p/7222583.html