【前端】HTML入门笔记

时间：2022-02-02 17:33:07

教程 HTML 指的是超文本标记语言 (Hyper Text Markup Language)、使用标记标签来描述网页

HTML 提示：使用小写标签\属性\属性参考手册\HTML颜色\HTML颜色名

h1:大标题 / <h1> - <h6>

p:文本段落

a:链接(可以是本地网页也可以是互联网上的页面) / <a href="。。。">。。。</a>

*没有下划线的链接 <a href="。。。" style="text-decoration:none">。。。</a>

*新窗口打开链接（target属性）： <a href="。。。" target="_blank">。。。</a>

*锚点(name属性)：

　　<p><a href="#C4">查看 Chapter 4。</a></p>

　　。。。。

　　<h2><a name="C4">Chapter 4</a></h2>

*电子邮件链接：（要先有邮箱客户端）略

img:图像 /<img src="。。。" width=X height=Y />

注释:<!-- 。。。 -->

pre:标签很适合显示计算机代码

address:在HTML中写地址

del:删除文本 /Jenny

ins:插入文本 /Hui

<br /> 就是没有关闭标签的空元素（<br。。。/> 标签定义换行）。

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

实现缩写或首字母缩写：

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

改变文字的方向：

·<bdo dir="rtl">。。。</bdo>

引用：使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。 //q会加上引号

HTML属性:总是在 HTML 元素的开始标签中规定。 /属性值加引号

<h1 align="。。。"> 拥有关于对齐方式的附加信息。 /left、center、right

<body bgcolor="。。。"> 拥有关于背景颜色的附加信息。

<table border="1"> 拥有关于表格边框的附加信息。

文本格式化：b,strong,big,em,i,small,sub,sup

================================

head进行样式设置:

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

内联样式：<p style="color: red; margin-left: 20px">。。。</p>

外部样式表：<head><link rel="stylesheet" type="text/css" href="xxx.css"></head>

内部样式表：

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

====================================================

背景图：<body background="。。。"></body>

插入图，并设置位置：<p>图像 <img src="。。。" align="bottom"> 在文本中</p> /Y轴上的有top,bottom,middle //X轴上的有left,right

为图片显示替换文本（如果图片没了会显示文本信息）：<img src="。。。" alt="文本信息" />

图片映射（图像上的某个区域都与超级链接）

====================================================

每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。 /一个表格一个table,一行一对tr,行内有多少数据，就有多少对td

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

*表格的边框属性：<table border="XX">。。。</table>

*表头：<th>。。。</th>

*空单元格：<td>&nbsp;</td>

*表的标题：<table><caption>XXOO</caption>。。。</table>

*定义跨行或跨列的表格单元格(一个单元格占别的N个行/列)：<td colspan="X">。。。</td>、<th rowspan="Y">。。。</th>

*表内的标签：<td><li>A</li><li>B</li><li>C</li></td>

*使用 Cell padding 来创建单元格内容与其边框之间的空白：<table border="X" cellpadding="Y">。。。</table> //cellspacing 变成单线条

*向表格添加背景：<table border="1" bgcolor="red"> //background=“图片路径” //单元格同理

*框架属性：<table frame="。。。">。。。</table> //使用 "frame" 属性来控制围绕表格的边框。 //box、above、below、hsides、vsides

*有序列表：<ol start="X">。。<li>。。</li>。。</ol> //无序用<ul>。。。</ul> //属性<ul type="square/circle/disc/A/a/I">

*定义列表：dl-dt-dd

====================

div:定义文档中的分区或节（division/section）。

span:定义 span，用来组合文档中的行内元素。

*给div配属性id~在头部可对不同的div进行style配置

*div/table都可以对网页布局

============================

表单、输入框：form - <input type="text" name="。。。">

*密码的输入框 - type="password"

*单选按钮（name要一致）：<input type="radio" name="。。" value="。。" /> 。。。 //复选框 type="checkbox"不用value

*表单的动作属性（Action）和确认按钮：<form name="input" action="跳转页面地址" method="get">。。。<input type="。" value="。" />

*下拉框：select(属性name) - option(属性value) //<select name="cars"><option value='A'>A</option></select>

默认选中的话加一个属性selected="selected" //checked="checked"

*文本域：<textarea rows="X" cols="Y">文本。。</textarea>

*type:button(属性value)

*在数据周围绘制一个带标题的框：fieldset

*重置：<input type="reset" value="重置">

=============================

框架：竖直、水平

  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

<frameset cols/rows="25%,50%,25%"><frame src="页面路径"></frameset>

*frameset - noresize 属性。框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。

*内联框架 iframe 属性src //<iframe src="/i/eg_landscape.jpg"></iframe>

*iframe边框属性frameborder

*一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C11"> 进行标识。 // <frame src="。。。html#C11">

*使用 iframe 作为链接的目标

　　iframe 可用作链接的目标（target）。

　　链接的 target 属性必须引用 iframe 的 name 属性

=================================

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

- 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

- 背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

=================================

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 //DOCTYPE 参考手册

=================================

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

*title 元素在所有 HTML/XHTML 文档中都是必需的。

*<base> 标签为页面上的所有链接规定默认地址或默认目标（target）。

*<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。

*<style> 标签用于为 HTML 文档定义样式信息。您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。

*元数据（metadata）是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

=================================

<body>

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>

</body>

*<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

==================================

HTML 中的预留字符必须被替换为字符实体。 //HTML 实体符号参考手册

*URL 编码参考手册

==================================

如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。 //网站主机教程

==================================

HTML Object 元素:<object> 的作用是支持 HTML 助手（插件）。//不是很理解这个

在 HTML 中播放声音的方法有很多种。//可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

*embed:三个属性width,height,src(插件路径)

*object:三个属性 width,height,data(插件路径)

*<audio> 元素是一个 HTML5 元素:一个属性<audio controls="controls"><source src="。。。.xxx" type="audio/xxx"/></audio>

*使用雅虎播放器（js调用）:<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮。

*直接使用超链接也可以。（浏览器自带播放器）<a href="。。。">。。。</a>

====================================

<video> 标签的作用是在 HTML 页面中嵌入视频元素。//obejce,embed也可以用

*<video width="320" height="240" controls="controls" autoplay="autoplay"><source src="。。。.xxx" type="video/xxx"/></video>

*在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

　　<embed src="视频swf地址" width="X" height="Y" type="application/x-shockwave-flash"></embed>

*直接使用超链接也可以。（浏览器自带播放器）<a href="。。。">。。。</a>

=====================================

XHTML 是以 XML 格式编写的 HTML。 /XHTML 指的是可扩展超文本标记语言/XML教程

文档结构

  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的
  • <html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭 /空元素也必须关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的

如何从 HTML 转换到 XHTML

    1. 向每张页面的第一行添加 XHTML <!DOCTYPE>
    2. 向每张页面的 html 元素添加 xmlns 属性
    3. 把所有元素名改为小写
    4. 关闭所有空元素
    5. 把所有属性名改为小写
    6. 为所有属性值加引号

相关文章