HTML笔记
HTML学习总结
概述
HTML的全称为Hyper Text Markup language, 汉语翻译为超文本标记语言。它就是通过标记标签来描述网页。生动一点的理解就是,HTML是给网页画好一个骨架,告诉浏览器怎么展示这个网页。
基本概念
- 标签(element)是HTML操作的基本单位,形式一般为尖括号,可以理解为HTML就是通过这些标签告诉浏览器如何操作的。标签一般是成对出现的,但是也有例外,比如
<br>
这种无内容的标签。 - 属性(attribute)是标签的一个功能,这个主要是为了更好的展示标签所要呈现的内容,可以理解为是标签的“化妆品”
- 类(class)属性值直接引用css的封装。
通用骨架
<!doctype html>
<!-- 这是一个HTML文档 -->
<html>
<head>
<title>test</title>
</head>
<body>
<p>这是一个简单的网页</p>
</body>
</html>
<!doctype html>
是表示这个是一个html文件<html></html>
这里是文本描述网页,可以理解为这是html编写有效区域<head></head>
这里主要是标记网页相关信息,比如<title>
展示在浏览器的tab上面。<body></body>
表示在浏览器展示时的区域,写在这里的东西都会直接展示在浏览器。<p></p>
表示普通文本信息。
常见元素
header
在header中,主要是标记网页信息,所以这里主要是告诉大家网站的基本信息。
<title></title>
这个是展示在浏览器标签显示的,如果收藏到浏览器也是展示这段文字,同时搜索引擎也会收录这个,所以这里面的描述一定要准确。<style></style>
定义网页展示风格,这部分涉及到 css<link rel="" href="">
这个主要是引入额外的文件使用。比如引入css文件,<lilnk rel="stylesheet" href="mystyle.css">
<meta>
用于标记网页的字符编码、网页描述、关键字、文档作者等等。这个标签主要是给浏览器使用(比如布局)、搜索引擎(收入关键词)以及其它网页服务。比如:<meta charset="GBK"><meta name="description" content="Just for test"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="NC"><meta name="viewport" content="width=device-width, initial-scale=1.0">
最后的viewport决定用户可视范围,device-width是根据设备展示宽度,initial-scale表示浏览器初次展示initial zoom level。<script></script>
定义JavaScript元素<base href="" target="_blank">
给出网页的基本涉及的URL或者是目标
body
文本
<h1></h1>...<h6></h6>
标题,最多支持6层。<p></p>
段落文本,但是注意,这里不会保留你文本的格式。<blockquote cite=""></blockquote>
引用文段<q></q>
单句引用<abbr title=""></abbr>
解释缩写词<address></address>
地址格式<cite></cite>
给文化作品备注<bdo dir='rtl'></bdo>
文本反过顺序<hr>
在文本中出现一条横线<br>
换行元素。这个和<hr>
一样没有成对<pre></pre>
保留文档的格式展示,是preformatted的前缀,可以理解为<p>
的格式版<a href="https://..." title="" target="_blank"></a>
文本引用跳转.href表示跳转的url或者邮箱,title填写链接说明,target表示跳转的方式,值有:_self
当前页面打开;_blank
新建一个标签打开含有该链接框架的父框架;_top
在当前的整个浏览器打开。(可以与图片结合,图片跳转)
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
常用的格式元素:
<b></b> 或者<strong></strong>
加粗字体<i></i> or <em></em>
斜体<mark></mark>
标记<del></del>
删除线<ins></ins>
下划线<sub></sub>
下标<sup></sup>
上标
表格
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<table></table>
表示图标,<tr></tr>
表示行,<td></td>
表示单元格
内嵌网页
<iframe>
长用来在网页中内嵌一个网页
<iframe src="url" title="description"></iframe>
列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
表示无序列表,如果要有顺序可以用<ol>
:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
这里面type表示怎么展示记数。
还有其它表示方式:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
块
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
图像
通用格式如下:
<img src="_url_" alt="_alternatetext_" width="500" height="600">
src
表示图像的地址,alt
是对图像的描述
图像的map可以指定一个区域跳转:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
这里的usemap给了一个编号,给后面map绑定后,就可以使用map来指定图片区域跳转。
音乐
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>