HTML学习笔记

时间 2019-11-08

标签 html 学习笔记栏目 HTML 繁體版

原文原文链接

一、HTML简介

HTML不是一种编程语言，而是一种标记语言，标记语言是一套标签，使用标签来描述网页，又称HTML标签。HTML文档包含了标签及文本内容。
标签是由尖括号包围的关键词，好比 <html>或<p>，标签一般是成对出现的，<html>……</html>或<p>……</p>，标签对中的第一个标签是开始标签，第二个标签是结束标签。
从开始标签到结束标签的全部代码称为HTML元素。HTML元素能够相互嵌套，HTML文档由嵌套的HTML元素构成。
HTML DOM 是 HTML Document Object Model(文档对象模型)的缩写，定义了访问和操做 HTML 文档的标准方法，或者说是关于如何获取、修改、添加或删除 HTML 元素的标准。html

二、HTML结构

简单的HTML文档来讲明HTML结构：web

<!--这里是注释，下面是一个HTML基本结构-->
<!DOCTYPE html>  
<html>  
	<head>  
		<title>Title of the document</title>  
	</head>

	<body>       
		The content of the document......        
	</body>                
</html>

<html>标签用于建立一个HTML文档，告诉浏览器这是一个HTML文档，是HTML文档中最外层的元素。编程
<body> 标签表示 HTML 网页的主体部分，该标签内的内容使用户能够看到的。浏览器
<head>元素是全部头部元素的容器。如下列出的元素能被用在 <head> 元素内部：编程语言
- <title> （在头部中，这个元素是必需的） ide
- <base> 布局
- <style> （设置样式）网站
- <link> （能够链接到外部样式） url
- <meta> spa
- <script> （js脚本）
- <noscript>

三、元素属性

大多数HTML元素能够设置属性，属性通常在开始标签中描述，属性老是以名称/值对的形式出现，好比：name="value"。适用于大多数HTML元素的属性有： class,id,style,title。

属性在开始标签中描述，不一样属性用空格分隔：

<p id="i" class="c" style="background:red">这是一个段落标签，用来演示属性的书写格式。</p>

属性值用引号引发，属性值内具备子属性的话用分号隔开，书写规则以下：（此处能够与CSS语法规则比较）

<h1 style="color:blue; text-align:center;">This is a header</h1>

四、经常使用的HTML标签及属性介绍：

一、标题标签 <h1> - <h6>
<h1>这是一级标题。</h1>
二、段落标签<p> <p>这个段落<br>演示了分行的效果</p>
其中，<br>为分行标签，无须成对使用。
三、水平线标签<hr> <p>这是一个段落。</p>
<hr> <p>这是另外一个段落。</p>
四、格式化标签 <b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加剧语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
五、超连接标签<a>

<a href="[//www.w3cschool.cn/](//www.w3cschool.cn/)" target="\_blank">W3C</a>

其中，href表示链接的目标，target="_blank"表示链接在新的页面打开。

六、图像标签<image>

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

src是源属性，是图像的url，是必须输入的属性；alt是若是找不到图像的话，用来代替图像的文本。

七、表格标签<table border="1">
- <table>…</table>：定义表格
- <th>…</th>：定义表格的标题栏（文字加粗）table head
- <tr>…</tr>：定义表格的行 table row
- <td>…</td>：定义表格行内的数据单元 table data cell border为边框属性。
八、列表标签：无序列表<ul>,有序列表<ol>

<ul> 
	<li>咖啡</li> 
	<li>茶</li> 
	<li>牛奶</li> 
</ul>

每个列表项使用<li>标签。

九、区块标签
HTML能够经过 <div> 和 <span> 将元素组合起来。<div>标签能够用来进行页面布局
十、HTML表单
表单使用表单标签<form>来设置，<input>是设置表单元素最重要的标签。

<form> 
	用户名（文本框）：<input type="text" name="firstname"><br>
	密码（密码）：<input type="password" name="pwd"></form><br>
	性别（单选按钮）：<input type="radio" name="sex" value="male">Male<input type="radio" name="sex" value="female">Female <br>
	爱好（复选框）：<input type="checkbox" name="vehicle" value="Bike">BIKE<input type="checkbox" name="vehicle" value="Car">CAR<br>
	提交按钮:<input type="submit" value="Submit">
</form>

十一、音频
在HTML中播放视频和视频的方法有不少种。可使用 <embed> 标签、<object> 标签以及 <audio> 标签。

<embed height="50" width="100" src="horse.mp3">  
<object height="50" width="100" data="horse.mp3"></object>
两者有什么差别，还不肯定。

<audio>标签是HTML新增的，用法以下。

<audio controls>
	<source src="/statics/demosource/horse.mp3" type="audio/mpeg">
</audio>

十二、视频在HTML中播放视频和视频的方法有不少种。可使用 <embed> 标签、<object> 标签以及 <video> 标签。 W3C中介绍，如下是最好的HTML解决方法。

<video width="320" height="240" controls> 
	<source src="movie.mp4" type="video/mp4"> 
	<source src="movie.ogg" type="video/ogg"> 
	<source src="movie.webm" type="video/webm"> 
	<object data="movie.mp4" width="320" height="240"> 
		<embed src="movie.swf" width="320" height="240"> 
	</object> 
</video>

五、HTML样式-CSS

CSS能够经过如下方式添加到HTML中:

内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 <head> 区域使用<style>标签来包含CSS
外部引用：使用外部CSS文件
以上三种方式中，最好的方式是经过外部引用CSS文件。

六、HTML中表示颜色的方法

直接用颜色的英文 :red
用16进制 :#FF0000
简写的16进制 :#F00
rgb表示法 :rgb(255,0,0)

<p style="background-color:red">经过颜色名设置背景颜色</p>

查看颜色值的网站 https://www.w3cschool.cn/html/html-colornames.html