WEB前端--HTML

HTML基础

一、基本概念

1、简介

HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。

2、基本结构

<html> 文件开始标记
<head> 文件头开始的标记
……文件头的内容
</head> 文件头结束的标记
<body> 文件主体开始的标记
……文件主体的内容
</body> 文件主体结束的标记
</html> 文件结束标记

3、标记

<html>：html开头，表示网页文档的开始

<head>：标明文档的头部信息

<body>：指明文档的主体区域

二、编写方法

文档工具，如：记事本
IDE

三、浏览html文件

1、运行效果

如果用pycharm编写，不要直接运行，直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来，比较慢。

2、看源文件

鼠标右键-->查看源文件

HTML基本标记

一、<head>标记

head头部元素包括标题、基础信息和元信息等；
作用范围：整篇文档；
头信息中可以有：<meta>元信息、文档样式表和脚本等；
头部信息一般不会再网页上直接显示。

二、<title>标记

用来说明页面的用途，显示在浏览器的标题栏中。
位置：<head>……</head>之间

三、<meta>元信息

用来定义页面信息的说明、关键字和刷新等，它不用结束标记。属性有name和http-equiv。

1、设置页面关键字

供搜索引擎使用

<html lang="en">
<head>
    <meta name="keywords" content="插入关键字" charset="utf-8">
    <title>插入关键字</title>
</head>
</html>

2、设置页面说明

详细说明网页的内容

1	`<meta` `name="description"` `content="设置页面说明"` `charset="utf-8">`

3、定义编辑工具

设置网页编辑工具名称

1	`<meta` `name="generator"` `content="Pycharm"` `charset="utf-8">`

4、设置作者信息

1	`<meta` `name="author"` `content="作者姓名"` `charset="utf-8">`

5、设置网页文字及语言

1	`<meta http-equiv="content-type"` `content="text/html; charset=utf-8">`

6、设置网页定时跳转

<meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" charset="utf-8">

7、icon

<head>
    <link rel="shortcut icon" href="image/favicon.ico">
</head>

8、css文件

9、js文件

四、主体标记<body>

1、背景色 bgcolor

默认颜色是白色或灰白色，bgcolor自定义背景颜色。

<body bgcolor="背景颜色">
……主体内容
</body>

2、背景图片 backgroud

1	`<body` `backgroud="背景图片">`

3、文字颜色 text

1	`<body` `text="文字的颜色">`

4、链接文字属性 link

超链接的颜色默认是蓝色，访问后变成暗红色。可以通过link修改：

1	`<body` `link="链接的颜色"` `alink="点击后的颜色">`

5、边距 margin

设置页面和浏览器边框的距离

1	`<body` `topmargin=上边距的值 leftmargin=左边距的值>`

五、注释标记

1	`<!-- 注释的内容 -->`

文字与段落标记

一、标题

1、h标记

<h1>~<h6>，级别从最高到最低。

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
……
</body>

2、对齐方式 align

默认是左对齐，如更改，用align属性。

left：左对齐
center：居中
right：右对齐

1	`<h1` `align="center">一级标题居中对齐</h1>`

二、文本基本标记

<font>标记用来控制字体、字号和颜色等属性。

1、字体属性 face

<body>
<p><font face ="字体样式">……</font></p>
</body>

2、字号属性 size

1	`<font` size`="文字字号">……</font>`

3、字体颜色 color

1	`<font` `color="字体颜色">……</font>`

三、文本格式化标记

1、字体加粗

<b>加粗的文字</b>
<strong>加粗的文字</strong>

2、斜体

<i>斜体文字效果</i>
<em>斜体文字效果</em>
<cite>斜体文字效果</cite>

3、上标 sup

如：平方、立方

sup是superscript的缩写，在数学公式、日常计算应用、书记文章注解等有广泛应用。可在文字的任何地方使用，允许嵌套。

<body>
<center>
a<sup>2</sup>+b<sup>2</sup>=(a+b)<sup>2</sup>-2ab
</center>
</body>

结果：

4、下标sub

如：化学方程式

sub是subscript的缩写，在数学公式、化学方程式有广泛应用。

<body>
<center>
H<sup>2</sup>SO<sup>4</sup> 化学方程式硫酸分子
</center>
</body>

结果：

5、增大一级字号

1	`<big>大字号内容</big>`

6、小字号标记

1	`<small>小字号内容</small>`

7、下划线

1	`<u>下划线内容</u>`

四、段落标记

1、段落p

<p>段落文字

它没有结束标记</p>，下一个<p>开始意味着上一个段落结束。

2、换行br

相当于windows的“ ”和linux的" "换行

1	`文字内容<br>文字内容`

3、不换行nobr

1	`<nobr>不换行的许多文字</nobr>`

五、水平线

1、插入水平线hr

<hr>

2、水平线宽度width

1	`<hr` `width="宽度">`

3、水平线高度size

1	`<hr` `size="高度">`

4、水平线去阴影noshade

布尔值，加上它，不会显示例题形状的水平线。浏览器默认是显示一条立体形状带阴影的水平线。

1	`<hr` `noshade>`

5、水平线颜色color

1	`<hr` `color="颜色">`

6、水平线排列 align

水平线默认是居中对齐，要想左对齐或右对齐，用align语法，该语法有3种：

center：居中
left：左对齐
right：右对齐

1	`<hr` `align="对齐方式">`

六、其它标记

以&开头，以；结束。

1、插入空格

 

2、插入特殊符号

“	"
&	&
<	<
>	>
×	×
§	&sect

还有更多，参考博客http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html。

使用列表

一、列表类型

列表有三种：有序列表、无序列表和定义列表。

有序列表：项目符号由字母或数字进行排序；
无序列表：项目符号由几个符号构成；
定义列表：灵活自定义。

二、有序列表

1、有序列表标记 ol

<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    ……
</ol>

2、有序列表序号类型 type

有序列表项目符号默认是数字，用type属性来改变成大小写字母、阿拉伯数字和大小写罗马数字。

type	列表项目的序号类型
1	数字1、2、3、4……
a	小写字母a、b、c、……
A	大写字母A、B、C、……
i	小写罗马数字i、ii、iii、……
I	大写罗马数字I、II、III、……

<ol type="序号类型">
    <li>有序列表项</li>
    <li>有序列表项</li>
    ……
</ol>

3、有序列表的起始数值 start

默认是从1开始，用start属性修改，也可以改动除数字的其它类型。

<ol start="起始数值">
    <li>有序列表项</li>
    <li>有序列表项</li>
    ……
</ol>

三、无序列表

1、无序列表标记 ul

<ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    ……
</ul>

2、无序列表类型 type

Disc	默认值，黑色实心圆点项目符号“●”
circle	空心圆环项目符号“○”
square	正方形的项目符号“□”

语法：

<ul type="符号类型">
    <li>无序列表项</li>
    <li>无序列表项</li>
    ……
</ul>

四、定义列表 dl

dl英文全称：definition list

dt英文全称：definition term

dd英文全称：definition description

<dl>
    <dt>定义条件</dt>
        <dd>定义描述</dd>
    ……
</dl>

举例：

<body>
    <dl>
        <dt>CSS</dt>
            <dd>CSS 就是 Cascading Style Sheets,中文翻译为“层叠样式表”。</dd>
        <dt>Dreamweaver</dt>
            <dd>Dreamweaver是网站编辑工具。</dd>
    </dl>
</body>

五、目录列表 <dir>

用于创建多列的目录列表，显示效果与无序列表相同，它的功能也可通过无序列表实现。

<dir>
    <li>有序列表</li>
    <li>无序列表</li>
    <li>目录列表</li>
</dir>

六、菜单列表 <menu>

用于设计单列的菜单列表，显示效果与无序列表相同，它的功能也可通过无序列表实现。

<menu>
    <li>列表项</li>
    <li>列表项</li>
    ……
</menu>

来自为知笔记(Wiz)