HTML全攻略-优快云博客

本文链接：https://blog.youkuaiyun.com/Danny1076376440/article/details/104633762

文章目录

学习网址
笔记

学习网址

https://www.w3school.com.cn/html5/html_5_audio.asp
https://www.runoob.com/html/html-tutorial.html

笔记

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

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

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表

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

HTML 图像- 图像标签（ < img>）和源属性（Src）
在 HTML 中，图像由< img> 标签定义

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

定义图像的语法是：
<img src="url" alt="some_text">
URL 指存储图像的位置
alt 属性用来为图像定义一串预备的可替换的文本。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

设置图像链接

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

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

创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


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

shape指的是点击区域的形状
coords指的应该是链接区域在图片中的坐标（像素为单位）
矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
圆形：(圆心坐标为(X1,y1)，半径为r)
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

HTML 表格

每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。

表格的表头使用 <th> 标签进行定义。

<caption> 标题

<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

border属性设置边框，0为无边框
colspan属性设置跨行操作

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

HTML 区块

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

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

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

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

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

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

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

HTML 表单和输入

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

type属性可指定输入的格式（密码、文本）

单选按钮（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>

提交按钮(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>

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

HTML 框架

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

iframe语法:
<iframe src="URL"></iframe>

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

frameborder="0"  //设置属性值为 "0" 移除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 脚本

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

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

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

JavaScript 能改变 HTML 元素的样式。

</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

HTML 字符实体

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

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

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

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