我是灼灼，一只初学Java的大一金渐层。
向往余秀华和狄兰·托马斯的疯狂，时常沉溺于将情感以诗相寄；追逐过王尔德、王小波的文字，后陷于毛姆和斯蒂芬·金不可自拔；热爱文学的浪潮，白日梦到底却总在现实里清醒；艳羡平静又极度渴盼奔跑的力量。
欢迎与我交流鸭· QQ:1517526827；
个人博客：https://blog.csdn.net/weixin_52777510?spm=1001.2101.3001.5343

Html学习笔记

内容来自菜鸟教程：HTML部分~
HTML（上）内容在这里！

文章目录

Html学习笔记

HTML 图像

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。

浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

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

替换文本属性的值是用户定义的。

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

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

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

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

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以要慎用图片。

加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 图像标签

标签	描述
img	定义图像
map	定义图像地图
area	定义图像地图中的可点击区域

创建图像映射中的代码：

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

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

不同形状

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

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

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

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

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

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

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

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。

使用边框属性来显示一个带有边框的表格：

<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

HTML 表格表头

表格的表头使用 <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

HTML 表格标签

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

HTML中的table可以大致分为三个部分：

thead ---------表格的页眉

tbody ---------表格的主体

tfoot ---------定义表格的页脚

thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。

<tr> </tr> 这个标签就是放在三间房子里面的东西，每一个 <tr> </tr> 就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。

用 <th></th> 表示数据的名称(标题) ,

<td></td>表示真正的数据内容。

表格三要素 table、tr、td 缺一不可。

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

<td>、<th> 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

表格结构语义标签：

1.<table>：表格根元素。
2.<thead>：表格头。
3.<tbody>：表格体。
4.<tfoot>：表格尾，一般可忽略该结构。
5.<tr>：表格行。

表格内容标签：

<th>：表头单元格。
<td>：表体单元格。
跨列：colspan
跨行：rowspan
单元格内边距：cellpadding
单元格外边距：cellspacing
col 和 colgroup 用于便捷定义表格指定列的样式。

HTML 列表

HTML 支持有序、无序和定义列表；

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，使用 <ul> 标签

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

Coffee
Milk

HTML 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签：

列表项使用数字来标记。

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

Coffee
Milk

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

  <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 列表标签

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

HTML 可以通过 <div> 和 **<span>**将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
div	定义了文档的区域，块级 (block-level)
span	用来组合文档中的行内元素，内联元素(inline)

HTML 布局

网页布局对改善网站的外观非常重要。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

虽然可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的，表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 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>

效果如下：

菜鸟教程(runoob.com)

内容在这里

这个HTML 代码会产生如下结果：

HTML 布局 - 使用表格

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

下面的例子使用三行两列的表格，第一和最后一行使用 colspan 属性来横跨两列：

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

菜鸟教程(runoob.com)

主要的网页标题
菜单 HTML CSS JavaScript	内容在这里
版权 © runoob.com

效果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。

HTML 布局标签

标签	描述
div	定义文档区块，块级(block-level)
span	定义 span，用来组合文档中的行内元素。

在 css 里面定义：

html p {margin:0; padding:0}

即可，用全局样式把 p 的边距给归零。

这样的副作用是网页所有的 p 都被重置了，所以也可以指定专门标签下的 p。例如，如果这个 p 是在一个 class 为content 的 div 下的，想去掉它的边距，就这么定义：

.content p {margin:0; padding:0;}

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置；

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

浏览器显示如下：

First name:
Last name:

表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

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

浏览器显示效果如下:

Password:

密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

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

浏览器显示效果如下:

Male
Female

复选框（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>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

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

浏览器显示效果如下:

Username:

假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

HTML 表单标签

New : HTML5新标签

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

<input type="reset">定义重置按钮

<input type="reset" name="button" id="button" value="重置">

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

表单中的单选按钮可以设置以下几个属性：value、name、checked

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked=“checked” 时，该选项被默认选中

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。

Q:如何使用隐藏在下拉列表中的默认空白值实现SELECT标记

A:只需使用禁用和/或隐藏属性：

<form>
  <select>
    <option selected disabled hidden style="display: none" value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
 </select>
</form>

selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style=“display:none”：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。

HTML 框架

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

<iframe src="https://www.runoob.com/" height="300px" width="99%" style="border: 0px; margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></iframe>

iframe语法:

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

该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

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

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" rel="noopener">RUNOOB.COM</a></p>

HTML iframe 标签

标签	说明
iframe	定义一个内联的iframe

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

栗子！

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

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

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

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我！</button>

点我！

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

HTML 脚本标签

标签	描述
script	定义了客户端脚本
noscript	定义了不支持脚本浏览器输出的文本

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。类似这样：

&*entity_name*;

或

&#*entity_number*;

如需显示小于号，我们必须这样写：< 或 < 或 <

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9
个。如需在页面中增加空格的数量，需要使用   字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

一些实例:

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML字符实体

实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

虽然 html 不区分大小写，但实体字符对大小写敏感。

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

HTML-URL

统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

语法规则:

**scheme`://`host.domain`:`port`/`path`/`filename**

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的 URL Scheme

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		计算机上的文件。

URL 字符编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL 编码实例

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

HTML总结

CSS学习

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。

JavaScript学习

JavaScript 可以让网页更加生动。

如果只想展示内容，静态网站是很好的展示形象，如果想与用户进行交换或者让网页更加生动那就需要使用到Javascript。

JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。

站点服务器

在自己的服务器上托管网站始终是一个选项。有几点需要考虑：

硬件支出

如果要运行"真正"的网站，不得不购买强大的服务器硬件。不能指望低价的 PC 能够应付这些工作。还需要稳定的（一天 24 小时）高速连接。

软件支出

服务器授权通常比客户端授权更昂贵。同时，服务器授权也许有用户数量限制。

人工费

不要指望低廉的人工费用，必须安装自己的硬件和软件。同时要处理漏洞和病毒，以确保服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

使用因特网服务提供商（ISP）
从 ISP 租用服务器很常见。
大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：

连接速度
大多数 ISP 都拥有连接因特网的高速连接。
强大的硬件
ISP 的 web 服务器通常强大到能够由若干网站分享资源。还需要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。
安全性和可靠性
ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。

选择 ISP 时的注意事项

24 小时支持
确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。免费电话服务也是必要的。
每日备份
确保 ISP 会执行每日备份的例行工作，否则有可能损失有价值的数据。
流量
研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么要确保不会因此支付额外费用。
带宽或内容限制
研究一下 ISP 的带宽和内容限制。如果计划发布图片或播出视频或音频，请确保有此权限。
E-mail 功能
确保 ISP 支持需要的 e-mail 功能。
数据库访问
如果计划使用网站数据库中的数据，那么确保的 ISP 支持需要的数据库访问。

XHTML

XHTML 是以 XML 格式编写的 HTML。

什么是 XHTML?

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

为什么使用 XHTML?

因特网上的很多页面包含了"糟糕"的 HTML，有的HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）；

XML 是一种必须正确标记且格式良好的标记语言。

今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

与 HTML 相比最重要的区别：

文档结构

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

元素语法

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

属性语法

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

<!DOCTYPE ....>是强制性的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

带有最少的必需标签的 XHTML 文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta charset="utf-8">  <title>文档标题</title> </head>  <body> 文档内容 </body>  </html>

XHTML 元素必须合理嵌套

在 HTML 中，一些元素可以不互相嵌套：

<b><i>粗体和斜体文本</b></i>

粗体和斜体文本

在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

<b><i>粗体和斜体文本</i></b>

粗体和斜体文本

XHTML 元素必须有关闭标签

正确示例：

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

空元素必须包含关闭标签

正确示例：

分行:<br /> 水平线: <hr /> 图片: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须是小写

正确示例：

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

属性名称必须是小写

正确示例:

<table width="100%">//width是属性名

属性值必须有引号

正确示例：

<table width="100%">

不允许属性简写

错误示例：

<input checked> <input readonly> <input disabled> <option selected>

正确示例：

<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected">

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

使用 W3C 验证器来测试 XHTML

HTML的全部内容学完啦！
在这里插入图片描述
如果对你有帮助的话不要忘记一键三连噢~
谢谢鸭~

初次编写于2021/2/19日；

【学习笔记】HTML学习笔记（下）

Html学习笔记

文章目录

HTML 图像

HTML 表格

HTML 列表

HTML 区块元素

HTML 布局

主要的网页标题

主要的网页标题

HTML 表单

HTML 框架

HTML 脚本

HTML 字符实体

HTML-URL

HTML总结

CSS学习

JavaScript学习

站点服务器

XHTML

猜你喜欢

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ