html笔记

最新推荐文章于 2022-03-29 11:08:50 发布

beyond_zhangna

最新推荐文章于 2022-03-29 11:08:50 发布

阅读量410

点赞数 1

分类专栏：业余文章标签： html

本文链接：https://blog.csdn.net/beyond_zhangna/article/details/84956213

版权

业余专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML笔记

HTML基础

HTML标题：<h1>~<h6>定义html标题
HTML段落：<p>
HTML链接：<a>

<a href="http://www.baidu.com">链接</a>

在href中指定链接地址
HTML图像：<img>

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

HTML元素

|开始标签(起始标签)|元素内容|结束标签(闭合标签)|
|-|-|
|<p>|段落|</p>|
|<a href="http://www.baidu.com">|链接|</a>|
|<br />|换行||

没有内容的HTML元素被称为空元素，空元素实在开始标签中关闭的。

HTML属性

元素可以提供属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现

例如上述的HTML链接(链接地址在href属性中指定)与HTML图像(图片地址通过src属性指定)。
注：属性值可以包括在双引号内，也可以包括在单引号内，当属性值本身就含有双引号时，必须包括在单引号内。

查看完整的HTML属性列表: HTML 标签参考手册。
更多标准属性说明：HTML 标准属性参考手册。

常规HTML元素属性：

属性	描述
`class`	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
`id`	定义元素的唯一id
`style`	规定元素的行内样式（inline style）
`title`	描述了元素的额外信息（作为工具条使用）

HTML标题

标题（Heading）是通过<h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。

HTML水平线：<hr />在页面中创建水平线，用于分割内容
HTML注释：

HTML段落

段落是通过<p>定义的，结束标签</p>。

HTML折行：<br /> 在不产生新的段落的情况下进行换行

HTML文本格式化

文本格式化标签

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

HTML计算机输出标签

标签	描述
`<code>`	计算机代码
`<kbd>`	键盘码
`<samp>`	计算机代码样本
`<var>`	变量
`<pre>`	预格式文本

HTML引文，引用，及标签定义

标签	描述
`<abbr>`	缩写
`<address>`	地址
`<bdo>`	文字方向
`<blockquote>`	长的引用
`<q>`	短的引用语
`<cite>`	引用、引证
`<dfn>`	一个定义项目

HTML链接

target属性：定义被链接的文档在何处显示
id属性：创建在一个HTML文档书签标记，对用户不可见

在HTML文档中插入ID:

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

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="http://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。

HTML `<head>`

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, 和 <base>.

HTML`<title>`

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML`<base>`

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

HTML`<link>`

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

HTML`<style>`

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

HTML`<meta>`

meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

实例
为搜索引擎定义关键词:

<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。

HTML样式-CSS

如何使用：
CSS是为了更好的渲染HTML元素而引入的，CSS 可以通过以下方式添加到HTML中:

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

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。

<!-- 背景色 -->
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<!-- 字体，颜色，大小 -->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<!-- 文本对齐方式 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

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

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

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

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

HTML 图像

Alt属性
alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
设置高度和密度
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

HTML表格

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

<table border="1">
    <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>

效果：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候希望显示边框。
使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

Row 1, cell 1

Row 1, cell 2

表格表头
表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<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>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格标签

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

HTML列表

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Coffee
Milk

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Coffee
Milk

自定义列表

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

Coffee

- black hot drink

Milk

- white cold drink

HTML区块`<div>` `<span>`

区块元素：大多数 HTML 元素被定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如<h1>, <p>,<ul>, <table>

内联元素：内联元素在显示时通常不会以新行开始。例如<b>, <td>, <a>, <img>

<div>元素：HTML<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span>元素：HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML布局

使用<div>元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

使用表格元素

使用 HTML <table> 标签是创建布局的一种简单的方式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

HTML 表单和输入

HTML表单用于收集不同类型的用户输入
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签<form>来设置:

输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域(Text Fields)
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
```
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
```
密码字段
密码字段通过标签<input type="password"> 来定义:
```
<form>
Password: <input type="password" name="pwd">
</form>
```

单选按钮(Radio Buttons)
<input type="radio"> 标签定义了表单单选框选项

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

复选框(Checkboxes)
<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<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>

提交按钮
<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
```
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
```

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

HTML框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。

设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

**移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

HTML 脚本

<script>标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script>元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：

<script>
document.write("Hello World!");
</script>

<noscript>标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

beyond_zhangna

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html笔记

HTML笔记HTML基础HTML标题：&lt;h1&gt;~&lt;h6&gt;定义html标题HTML段落：&lt;p&gt;HTML链接：&lt;a&gt;&lt;a href="http://www.baidu.com"&gt;链接&lt;/a&gt;在href中指定链接地址HTML图像：&lt;img&gt;&lt;img src="
复制链接

扫一扫