HTML学习

最新推荐文章于 2023-07-09 22:04:31 发布

suuunnnyoy

最新推荐文章于 2023-07-09 22:04:31 发布

阅读量345

点赞数

分类专栏：学习笔记文章标签： HTML

本文链接：https://blog.csdn.net/qq_33067361/article/details/80019454

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.HTML简介

<!DOCTYPE html>    <!--声明为HTML5文档，html不区分大小写-->
<html>           <!--HTML元素的根元素-->
    <head>       <!--包含了文档的元（meta）数据-->
        <meta charset = "UTF-8">  <!--声明为中文编码，避免中文乱码的情况-->
        <title> test标题</title>  <!--描述了文档的标题-->
    </head>
    <body>              <!--包含了可见的页面内容-->
        <h1>我的第一个标题</h1>  <!--定义了一个大标题-->
        <p>我的第一个段落</p>  <!--定义一个段落-->
    </body>
</html>

二.HTML编辑器

可以直接使用sublime或者notepad，新建文件写html代码即可，写后另保存为以.html或者.htm为后缀的文件，最后在浏览器种选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击HTML文件即可运行。

1.HTML基础

（1）HTML标题

HTML的标题是通过<h1>-<h6>标签来定义的

<h1>first title</h1>
<h2>second title</h2>
<h3>third title</h3>

（2）HTML段落

<p>first paragraph</p>
<p>second paragraph</p>

（3）HTML链接

HTML链接是通过标签<a>来定义的

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

（4）HTML图像

HTML图像是通过标签<img>来定义的

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

三.HTML元素

HTML文档由HTML元素定义

开始标签	元素内容	结束标签
《p》	这是一个段落	《/p》
《a href=”default.htm”》	这是一个链接	《/a》
《br》	换行

我真的不知道怎么能把<p>这样的打到表格里面去

HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容，有的HTML元素有空内容，例如<br>，空元素在开始标签中进行关闭，也就是以开始标签的结束而结束。
注意：建议使用小写标签

四.HTML属性

HTML元素可以设置属性，属性可以在元素中添加附加信息，一般描述于开始标签，并总是以名称/值对的形式出现，比如：name = “value”

<a href="http://www.runoob.com">这是一个链接</a> <!--链接地址在href属性中指定-->

HTML属性常用引用属性值，属性值被包含在双引号内，并使用小写属性。常用属性有以下几种：

class：为html元素定义一个或者多个类名，class = “”,引号内可以添加多个class属性（classname）（类名从样式文件引入）
id：定义元素的唯一id，引号中只能填写一个，多个无效
style：规定元素的行内样式（inline style）
title：描述了元素的额外信息（作为工具条使用）

五.HTML标题

标题是通过<h1>-<h6>标签进行定义的，<h1>是最大的标题，<h6>是最小的标题
注：浏览器会在标题后自动添加空行。

HTML水平线

<hr>标签在HTML页面中创建水平线

HTML注释

<!--这是一个注释-->

HTML提示

如果要查看网页的源码，右击查看源文件或者查看页面源代码就可以。

六.HTML段落

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

HTML折行

如果希望咋不产生一个新段落的情况下进行换行（新的一行），要使用<br>

HTML输出

我们无法确定HTML被显示出来的确切效果是什么样的，屏幕的大小以及窗口的调整都有可能导致不同的结果，而且我们也无法通过在HTML代码中添加额外的空格或者换行来改变输出的结果，在html中所有连续的空格或者空行都会被算作一个空格。

七.HTML文本格式化

1.文本格式化

在HTML文件中对文本进行格式化

<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本的的字体被放大了</big>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
<br>
这个文本包含<sub>下标</sub>
<br>
这个文本包含<sup>上标</sup>

注：<b>``<i>只是简单的将文本加粗和变成斜体，而<strong>``<em>有强调的作用（如果使用网页阅读器阅读网页，strong会重读，b不会），例如strong是为了未来建设语义网而诞生的，因为html是负责显示的标记，不能表示语义，而strong在语义上走出了第一步。

2.预格式文本

如何使用pre标签对空格和空行进行控制

<pre>
此案例演示如何使用 pre 标签
对空行和    空格
进行控制

3.“计算机输出”标签

这些标签用于显示计算机/编程代码

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

4.地址的写法

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

输出就是标准的地址格式

5.缩写和首字母缩写

在某些浏览器中，当把鼠标移到缩略词上的时候，title可用于展示出完整的表达式

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

注：IE5中acronym元素有效，Netspace6.2中abbr和acronym都有效

6.改变文字显示方向

将输入的文字由右到左显示

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

7.引用（我没觉得有啥用）

定义短的引用语，定义引用、引证的时候用<cite>

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<q>和</q>中间是引用的内容，输出时会自动加上引号

8.删除线和下划线

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

八.HTML 链接

超链接可以是一个字一个词一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档的某个部分。当把鼠标移到网页中的某个链接上的时候，箭头会变为一只小手。在标签中使用了herf属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：

一个没有被访问过的链接将显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并且带有下划线
单击链接时，链接显示为红色并且带有下划线。
注：如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定显示。
HTML链接的语法如下

<a href = "url">链接文本</a>

url是链接的目标，链接文本是会在网站中显示的文本，点击文本可以跳转到url，注意使用URL的时候应该始终将正斜杠添加到子文件夹（也就是在最后加上斜杆）

1.target属性

使用target属性，可以定义被链接的文档在何处显示

<a href = "http://www.baidu.com/" target = "_blank">访问百度</a>

会在新窗口中打开链接内容

<p>跳出框架?</p> 
<a href="http://www.runoob.com/" target="_blank">点击这里!</a>

会在当前窗口打开链接内容

2.id属性

id属性可以用于创建一个HTML文档书签标记（书签在HTML文档中是不显示的，所以对于读者来说是隐藏的），

<a id = "tips">有用的提示部分</a>

这个应该是可以用来跳转到本页面的某部分，但是样例我还没有搞明白，哭
我造了我造了

<a href = "#C4">查看C4位置的东西</a>
<a id = "C4">我是C4呀</a>

这样点击查看C4位置的东西就会跳转到C4位置了啊

3.图片链接

<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

还有待学习

4.点击链接发送邮件

<a href="mailto:liyu9691@qq.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>

调用系统默认的邮件程序发送给liyu9691@qq.com，收件人那里已经填好了邮箱地址，如果要抄送要使用关键字cc，密送使用关键字bcc。第一个参数也就是邮件地址后面的分隔符用？，其他参数的分隔符用&，多个邮件的地址用；隔开

<a href="liyu9691@qq.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>

九.HTML`<head>`

HTML<head>元素包含了所有的头部标签元素，在<head>中可以插入脚本（scripts），样式文件（CSS），以及各种meta信息。

1.HTML`<title>`元素

<title>标签定义了不同文档的标题，他在HTML/XHTML文档中是必须的。
- <title>标签定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题

2.HTML`<base>`元素

<base>标签描述了基本联机的链接地址，也就是HTML文档中所有未定义链接标签的默认链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

3.HTML`<link>`元素

<link>定义了文档与外部资源之间的关系，通常用来链接到样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4.HTML`<style>`元素

<style>元素定义了HTML文档的样式文件引用地址。也可以直接在其中添加样式来渲染HTML文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

5.HTML`<meta>`元素

meta标签描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析。meta元素通常用来指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据，它可以使用于浏览器（如何显示内容或者重新加载页面），搜索引擎（关键词），或者其他web服务。

为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容
<meta name="keywords" content="HTML,CSS,XML.XHTML,JavaScript">
定义网页作者
<meta name="author" content="liyu">
每三十秒钟刷新当前页面
```
<meta http-equiv="refresh" content="30">
```
6.HTML<scrip>元素

用于加载脚本文件，例如JavaScript

十.HTML样式CSS

CSS是在HTML4开始使用的，是为了更好的渲染HTML元素而引入的。
CSS可以通过以下方式添加到HTML中：

内联样式：在HTML元素中使用“style”属性
内部样式表：在HTML文档头部head区域使用<style>元素来包含CSS
外部引用：使用外部CSS文件

1.内联样式

背景颜色
background-color定义一个元素的背景颜色。

<body style = "background-color:yellow;">
<h2 style = "background-color:red">这是一个标题</h2>
</body>

字体，字体颜色，字体大小
分别使用font-family（字体），color（颜色），font-size（字体大小）属性来定义字体的样式
```
<h1 style = "font-family:verdana:">一个标题</p>
<p style="font-famliy:arial;color:red;font-size:20px;">一个段落</p>
```
文本对齐方式
使用text-align属性来定义文本的水平与垂直对齐方式
```
<h1 style="tet-align:center;">居中对齐的标题</h1>
```

2.内联样式表

当单个文件需要特别样式的时候，可以使用内部样式表，可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3.外部样式表

当样式需要被应用到许多页面的时候，外部样式表是理想的选择。使用外部样式表可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

十一.HTML图像

在HTML中用<img>标签定义图像，<img>是空标签，只包含属性，没有闭合标签。要在页面上显示图像需要使用属性src，src指“source”，属性的值是图像的URL地址。
<img src = "url" alt = "some_text">
1. Alt属性
alt属性用来为图像定义一串可替换的文本。在浏览器无法载入图像时，替换文本告诉读者他们失去的信息。此时浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img src="boat.gif" alt = "Big Boat">
2. 设置图像的高度与宽度
height(高度)和width(宽度）属性用于设置图像的高度和宽度，默认单位为像素，最好指定高度和宽度，这样页面加载的时候会保留指定的大小，如果没有指定的加载的时候肯能会破坏HTML页面的整体布局。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
3. 基本的注意事项：有用的提示
- 尽量减少图片的使用，减少网页的加载时间
- 加载页面的时候一定要插入页面图像的路径，否则显示出来的是一个破碎的图片。
4. 更多实例
在文字中排列图像

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

HTML4中align属性已经废弃，HTML5不支持该属性，可以使用CSS代替。

创建图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<map>定义图像地图
<area>定义图像地图中的可点击区域，其中shape指的是点击区域的形状，coords指的是链接区域在图片中的坐标（像素为单位）
1. 矩形：（左上角坐标为（x1,y1），右下角顶点坐标为（x2,y2））

 <area shape="rect" coords="x1,y1,x2,y2" href=url>

圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)

 <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML表格

表格由<table>标签来定义。每个表格都有若干行，由<tr>标签来定义，每行被分成若干单元格，由<td>标签来定义，字母td指表格数据（table data），就是数据单元格的内容。数据单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

border属性表示边框，<th>表示表格表头，大多数浏览器会把表头显示为粗体居中的文本。

其他属性：

表格标题

<caption>这里是标题</caption>

跨行或者跨列的单元格

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

单元格边距（单元格中内容与其边框之间的空白）

<table border="1" cellpadding="10">

单元格间距（单元格之间的距离）

<table border="1" cellsapcing="10">

十三.HTML列表

HTML支持有序和无序两种列表

1.无序列表

无序列表是一个项目的列表，使用粗体原点进行标记

<ul>
<li>COFFEE</li>
<li>MILK</li>
</ul>

2.有序列表

有序列表也是一列项目，但是它使用数字进行标记。

<ol>
<li>COFFEE</li>
<li>MILK</li>
</ol>

3.自定义列表

不仅仅是一列项目，而且是项目和注释的组合

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<dt>是自定义列表项目，<dd>是自定义列表项目的描述

十四.HTML`<div>`和`<span>`

HTML可以通过<div>和<span>将元素结合起来
1. HTML块级元素
块级元素在浏览器中显示的时候会以新行来开始和结束，例如<h1>,<p>,<ul>,<table>
2. 内联元素
在显示的时候通常不会以新行开始，例如<b>,<td>,<a>,<img>
3. HTML<div>元素
HTML<div>元素是块级元素，浏览器会在其前后显示折行，他是用来组合其他的HTML元素，没有特定的含义，有两种使用方式，一种是和CSS一同使用，用于对大的内容块设置样式属性，另一个常见的用途是文档布局，它取代了表格定义的老式方法
4. HTML<span>元素
HTML<span>元素是内联元素，可以用作文本的容器，也没有特殊的含义，当和CSS一起使用时，<span>元素可用于不分文本设置样式属性。

十五.HTML表单和输入

HTML表单用于收集不同类型的用户输入
表单元素允许用户在表单中输入内容，比如：文本域(textarea),下拉列表，单选框（radio-buttons）、复选框（checkboxes）等等

<form>
input元素
</form>

HTML表单输入元素

多数情况下被用到的表单标签是输入标签<input>，输入类型有属性type来定义，常用的属性有以下几种：
1. 文本域（text fields）

<form>
First name:<input type = "text" name = "firstname"><br>
Last name:<input type = "text" name = "lastname">
</form>

密码字段

<form>
Password:<input type="password" name="pwd">
</form>

单选按钮（radio buttons）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框（checkboxes）

<form>
<input type="checkbox" name="vehicle" value="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car
</form>

提交按钮（submit button）
当用户点击确认按钮的时候，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" anme="user">
<input type="submit" value="Submit">
</form>

十六.HTML框架

通过使用框架在一个浏览器窗口显示不止一个页面。

<iframe src="demo_iframe.htm" width="200" height="200" frameborder=“0”></iframe>

src属性是指指向的网页，height和width属性用来定义iframe标签的高度和宽度，默认以像素为单位，也可指定其按照比例显示，例如“80%”，frameborder属性用来定义iframe是否显示边框，设置属性值为“0”的时候移除其边框。

十七.HTML颜色

HTML颜色由一个十六进制的符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（#00），最大值是255（#FF）
相对于使用如果不（255，255，0），使用rgba（255，255，0，0.5）可以设置颜色透明度。0.5表示颜色的透明度为0.5，范围为0-1。
需要用的时候回网站找http://www.runoob.com/html/html-colors.html