WEB前端--HTML
HTML基础
一、基本概念
1、简介
HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。
2、基本结构
1 2 3 4 5 6 7 8 | <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、设置页面关键字
供搜索引擎使用
1 2 3 4 5 6 | <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、设置网页定时跳转
1 | <meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" charset="utf-8"> |
7、icon
1 2 3 | <head> <link rel="shortcut icon" href="image/favicon.ico"></head> |
8、css文件
9、js文件
四、主体标记<body>
1、背景色 bgcolor
默认颜色是白色或灰白色，bgcolor自定义背景颜色。
1 2 3 | <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>，级别从最高到最低。
1 2 3 4 5 6 | <body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>……</body> |
2、对齐方式 align
默认是左对齐，如更改，用align属性。
left：左对齐
center：居中
right：右对齐
1 | <h1 align="center">一级标题居中对齐</h1> |
二、文本基本标记
<font>标记用来控制字体、字号和颜色等属性。
1、字体属性 face
1 2 3 | <body><p><font face ="字体样式">……</font></p></body> |
2、字号属性 size
1 | <font size="文字字号">……</font> |
3、字体颜色 color
1 | <font color="字体颜色">……</font> |
三、文本格式化标记
1、字体加粗
1 2 | <b>加粗的文字</b><strong>加粗的文字</strong> |
2、斜体
1 2 3 | <i>斜体文字效果</i><em>斜体文字效果</em><cite>斜体文字效果</cite> |
3、上标 sup
如：平方、立方
sup是superscript的缩写，在数学公式、日常计算应用、书记文章注解等有广泛应用。可在文字的任何地方使用，允许嵌套。
1 2 3 4 5 | <body><center>a<sup>2</sup>+b<sup>2</sup>=(a+b)<sup>2</sup>-2ab</center></body> |
结果：
4、下标sub
如：化学方程式
sub是subscript的缩写，在数学公式、化学方程式有广泛应用。
1 2 3 4 5 | <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
1 | <p>段落文字 |
它没有结束标记</p>，下一个<p>开始意味着上一个段落结束。
2、换行br
相当于windows的“\r\n”和linux的"\n"换行
1 | 文字内容<br>文字内容 |
3、不换行nobr
1 | <nobr>不换行的许多文字</nobr> |
五、水平线
1、插入水平线hr
1 | <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、插入空格
1 | |
2、插入特殊符号
| “ | " |
| & | & |
| < | < |
> | > |
| × | × |
| § | § |
还有更多，参考博客http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html。
使用列表
一、列表类型
列表有三种：有序列表、无序列表和定义列表。
有序列表：项目符号由字母或数字进行排序；
无序列表：项目符号由几个符号构成；
定义列表：灵活自定义。
二、有序列表
1、有序列表标记 ol
1 2 3 4 5 | <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、…… |
1 2 3 4 5 | <ol type="序号类型"> <li>有序列表项</li> <li>有序列表项</li> ……</ol> |
3、有序列表的起始数值 start
默认是从1开始，用start属性修改，也可以改动除数字的其它类型。
1 2 3 4 5 | <ol start="起始数值"> <li>有序列表项</li> <li>有序列表项</li> ……</ol> |
三、无序列表
1、无序列表标记 ul
1 2 3 4 5 | <ul> <li>无序列表项</li> <li>无序列表项</li> ……</ul> |
2、无序列表类型 type
| Disc | 默认值，黑色实心圆点项目符号“●” |
| circle | 空心圆环项目符号“○” |
| square | 正方形的项目符号“□” |
语法：
1 2 3 4 5 | <ul type="符号类型"> <li>无序列表项</li> <li>无序列表项</li> ……</ul> |
四、定义列表 dl
dl英文全称：definition list
dt英文全称：definition term
dd英文全称：definition description
1 2 3 4 5 | <dl> <dt>定义条件</dt> <dd>定义描述</dd> ……</dl> |
举例：
1 2 3 4 5 6 7 8 | <body> <dl> <dt>CSS</dt> <dd>CSS 就是 Cascading Style Sheets,中文翻译为“层叠样式表”。</dd> <dt>Dreamweaver</dt> <dd>Dreamweaver是网站编辑工具。</dd> </dl></body> |
五、目录列表 <dir>
用于创建多列的目录列表，显示效果与无序列表相同，它的功能也可通过无序列表实现。
1 2 3 4 5 | <dir> <li>有序列表</li> <li>无序列表</li> <li>目录列表</li></dir> |
六、菜单列表 <menu>
用于设计单列的菜单列表，显示效果与无序列表相同，它的功能也可通过无序列表实现。
1 2 3 4 5 | <menu> <li>列表项</li> <li>列表项</li> ……</menu> |
浙公网安备 33010602011771号