HTML学习笔记（一）

来源：互联网发布：左程云算法视频下载编辑：程序博客网时间：2024/06/03 05:48

HTML概述

在HTML5版本中，省略了W3C的doctype，只需要写成如下形式：
<!doctype html>/HTML5的声明头/
假如想指定文档使用的编码为UTF-8：
<meta http-equiv=”Content-type” content=”text/html;charset=utf-8”>HTML4.01代码
<meta charset=”utf-8”>HTML5代码

HTML常见标签

文档的内容要包含在 <html></html>标签里。

文档结构标签
主要用来标识文档的基本结构。

<html>…</html>：HTML文档的起始和中止
<head>…</head>：HTML文档的头部区域
<body>…</body>：HTML文档的主体区域
<div>…</div>：分隔标签
<br/>：换行
文本格式标签
主要用来标识文本区域，并且附带一定的显示格式。

<title>…</title>：网页标题
<hi>…</hi>：标题文本，其中i表示1、2、3、4、5、6，表示一级、二级、三级等标题
<p>…</p>：段落文本
<pre>…</pre>：预定义文本
<blockquote>…</blockquote>：引用文本
字符格式标签
字符格式标签主要用来标识部分文本字符的语义，很多字符格式标签可以呈现一定的显示效果。

<b>…</b>：强调文本，加粗
<i>…</i>：引用文本，斜体
<u>…</u>：底线
<del>…</del>：删除线
<blink>…</blink>：闪烁文本，闪烁显示
<big>…</big>：放大效果
<small>…</small>：缩小文本
<sup>…</sup>：上标文本
<sub>…</sub>：下标文本
<cite>…</cite>：引用文本
例如：
质能方程E=mc²
列表标签
HTML中列表可分为有序列表和无序列表

<ul>…</ul>：无序列表
<ol>…</ol>：有序列表
<li>…</li>：列表项目
例如：
- Hello
- Thank you
- Goodbye
链接标签
联系多个网页

<a>…</a>：超链接，点击跳转页面
例如：
跳转页面
Kevin的博客
跳转当前页面某个锚点
跳转到顶部
多媒体标签
引入外部的多媒体文件并进行显示。

<img/>：嵌入图像
在HTML4中
<embed>…</embed>：嵌入多媒体
<object>…</object>：嵌入多媒体
在HTML5中
<video src=”movie.ogg” controls=”controls”></video>：video元素
<audio src=”music.wav”></audio>
表格标签
用来组织和管理数据

<table>…</table>：表格定义
<caption>…</caption>：表格标题
<th>…</th>：定义表头
<tr>…</tr>：定义表格行
<td>…</td>:定义单元格
例如：
Student TableNameSexAgeKevinM20CandyF20BobM20
表单标签
表单标签用来制作交互式表单

<form>…</form>：表单结构
name=”login”
method=”post”
action=”xxx”
<input>…</input>：文本域、按钮、复选
type={“text”,”password”,”checkbox”,”radio”,”hidden”}
<textarea>…</textarea>：多行文本框
type=”text”
<select>…</select>：下拉列表
<option>…</option>：下拉列表选项
例如：

甲
乙
丙

HTML属性

在这里简略的介绍几个吧

前三个属性大部分元素都拥有的

属性含义 class 类样式，在CSS中用.（点）引起 id 唯一标识，在CSS中用#引起 style 在标签内写样式 alt 元素的替代文本，如无法显示图片时 title 元素的提示文本 src 资源的地址

参考

[1] 李东博.HTML5+CSS3从入门到精通[M].北京：清华大学出版社，2013：15-38.

原创文章，未经博主允许不得转载

0 0