本文是在自学HTML中,个人感觉必要重要的一些零碎知识点,用于自用,如有错误,欢迎指正。感谢感谢!!

1.HTML5网页语义元素
元素名 含义
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
detailes 定义额外的细节
summary 定义details元素的标题
2.单位

px:像素 相对长度单位 相对于显示器屏幕分辨率而言的
em:相对单位长度 相对于当前对象内文本的字体尺寸
pt:点 绝对长度单位

3.注释方法

<!-- 注释内容- ->

4.各种常用命令

<br/> 换行
<hr/> 创建水平线

5.适用于大多数HTML元素的属性
属性 描述
class classname 规定元素的类名(classname)
id id id规定元素的唯一
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)
6.样式设置

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 如果图像无法正常显示代替的文字

9.表格

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>

执行结果如下:
HTML:学习笔记_css

11.块

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>

输出结果HTML:学习笔记_ide_02
frameset定义了将整体页面如何分割,每一个frame定义了每一个框架中的HTML文档。
PS. 若想使框架固定无法移动,可以使用在<frame>中加入noresize=“noresize”;或者在fradlmeset中加入
<noframes> 标签。
PS. 框架也可以混合。在frameset标签中增加frameset进行不同框架的混合。

12.2导航框架

导航框架的具体实现

13.背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色用gbcolor设置
背景图像用background设置

14.路径
路径 描述
<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 位于当前文件夹的上一级文件夹中
15.头部元素

<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)
写法:&nbsp;
用处:空格