本文是在自学HTML中,个人感觉必要重要的一些零碎知识点,用于自用,如有错误,欢迎指正。感谢感谢!!
1.HTML5网页语义元素元素名 | 含义 |
---|---|
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
detailes | 定义额外的细节 |
summary | 定义details元素的标题 |
px:像素 相对长度单位 相对于显示器屏幕分辨率而言的
em:相对单位长度 相对于当前对象内文本的字体尺寸
pt:点 绝对长度单位
<!-- 注释内容- ->
4.各种常用命令<br/> 换行
<hr/> 创建水平线
属性 | 值 | 描述 |
---|---|---|
class | classname | 规定元素的类名(classname) |
id | id | id规定元素的唯一 |
style | style_definition | 规定元素的行内样式(inline style) |
title | text | 规定元素的额外信息(可在工具提示中显示) |
6.1外部样式表
当很多界面应用同一样式时,外部样式表比较合适。只需要改变外部样式表文件,就可以该表所有的外观。
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
6.2内部样式表
单个文件需要特殊样式时,使用内部样式表。在head部分通过style定义。如图分别定义body和p的样式。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
6.3内联样式
个别元素应用时,使用内联样式。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
7.超链接
<a>用于超链接
7.1链接到某一部分(#不可少)
跳转到name="flag"的部分
<a name="flag">123</a>
<a href="#flage">123</a>
7.2图像超链接
<a href="">
<img border="0" src="example.gif" />
8.图像
src 图像链接
alt 如果图像无法正常显示代替的文字
1.每个表格由table 标签开始。
每个表格行由tr 标签开始。
每个表格数据由 td 标签开始。
2.在<table>标签中使用 cellpadding="n"定义内容与格子间距
使用 cellspacing="n"定义格子与格子间距
使用 bgcolor="color"定义背景颜色
使用 background="path"定义背景图片
使用fram="box/above/below/hsides/vsides"定义框架
使用border属性规定规定围绕表格的边框的宽度。
3.表格的表头使用 <th>标签进行定义。
4.在<table>标签内部使caption来添加标题。
5.有序列表为<ol>无序列表为<ul>
在有序列表和无序列表中可以使用<li>定义列表项目
在<th>中使用colspan="n"或者rowspan="n"来指定表头行或列占的格数。
table元素可以取得布局效果,可以通过CSS设置表格元素的样式。
<html>
<head>
<style>
table.table_exa {
width:50%;
border:1px solid #d4d4d4;
}
table.table_exa th, td {
padding:20px;
}
table.table_exa th {
width:80px;
}
</style>
</head>
<body>
<table class="table_exa">
<tr>
<th>
<img src="/user/examplr.jpg" alt="Wrong" style="height:40px;width:40px">
</th>
<td>
example
</td>
</tr>
</table>
</body>
</html>
10.列表
10.1一般列表
<ul>无序列表
<ol>有序列表
<li>列表内容
PS. 列表可以嵌套
<html>
<body>
<h4>一个嵌套列表:</h4>
<ul>
<li>动物</li>
<li>植物
<ul>
<li>树</li>
<li>花</li>
</ul>
</li>
<li>人</li>
</ul>
</body>
</html>
10.2定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<html>
<body>
<dl>
<dt>动物</dt>
<dd>猫</dd>
<dd>狗</dd>
<dt>植物</dt>
<dd>花</dd>
<dd>草</dd>
</dl>
</body>
</html>
执行结果如下:
11.1HTML 块元素 <div>
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
使用<div>可以对div内所有的元素进行统一的样式设计。
11.2HTML 内联元素 <span>
HTML <span> 元素是内联元素,可用作文本的容器。使用<span>可以对span内所有的文字进行统一的样式设计。
12.框架12.1普通框架
使用框架可以在一个界面上显示多个HTML文件(界面),每一个html文件为一个框架,相互之间独立。
例如:
三个垂直框架
<html>
<frameset cols = "30%,30%,40%">
<frame src="C:\Users\huank\HTML\HTML中的样式练习1.html">
<frame src="C:\Users\huank\HTML\HTML中的样式练习2.html">
<frame src="C:\Users\huank\HTML\HTML中的样式练习3.html">
</html>
输出结果
frameset定义了将整体页面如何分割,每一个frame定义了每一个框架中的HTML文档。
PS. 若想使框架固定无法移动,可以使用在<frame>中加入noresize=“noresize”;或者在fradlmeset中加入
<noframes> 标签。
PS. 框架也可以混合。在frameset标签中增加frameset进行不同框架的混合。
12.2导航框架
13.背景<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色用gbcolor设置
背景图像用background设置
路径 | 描述 |
---|---|
<img src=“picture.jpg”> | picture.jpg 位于与当前网页相同的文件夹 |
<img src=“images/picture.jpg”> | picture.jpg 位于当前文件夹的 images 文件夹中 |
<img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
<img src="…/picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
<head> 元素是所有头部元素的容器。 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
<title> 标题定义文档的标题。
<head>
<title>123</title>
</head>
<mata>描述文档、定义文档关键词
下面的 meta 元素定义页面的描述:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
<base> 标签为页面上的所有链接规定默认地址或默认目标(target)
<head>
<base href="" />
<base target="_blank" />
</head>
<link> 标签定义文档与外部资源之间的关系。常用语连接样式表。
<head>
<link rel="basestyle" type="text/css" href="mystyle.css" />
</head>
<style> 标签用于为 HTML 文档定义样式信息。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<script> 标签用于定义客户端脚本,比如 JavaScript。
16.实体最常用的是不间断空格(non-breaking space)
写法:
用处:空格