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>
|
转载于:https://www.cnblogs.com/daliangtou/p/5169171.html
WEB前端--HTML相关推荐
- 读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- 对WEB前端的几段思考（一）——界面设计和性能优化（整理中）
尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...
- web前端知识点太多_初学web前端，学习方法容易走偏，这是为什么？
一.了解web前端 所谓"知己知彼,百战不殆",在学习web前端之前,还是让我们先了解一下什么是web前端吧! 所有用户终端产品与视觉和交互有关的部分,都属于前端开发的领域.从狭义 ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
- web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
- 哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
- web前端培训要学多久
近几年web前端在互联网行业的快速发展,很多人都对web前端是非常感兴趣的,学习web前端技术的人越来越多,那么参加web前端培训要学多久呢?相信大家都想知道这个答案,我们来看看下面的详细介绍. ...
- web前端的就业前景好不好
web前端的就业前景好不好?一直有人都想知道这个答案,其实放眼互联网未来,web前端的发展前景都是非常好的,那么它的就业前景自热也是不错,具体来看看下面的详细介绍就知道了. web前端的就业前景好不好 ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
最新文章
- maven配置阿里云仓库镜像
- 用 API 提取、写入指定网站的 Cookie - 回复 bangrj 的问题
- c++ split 方法(转)
- oracle查询 ：一个角色包括的系统权限，对象权限，Oracle有多少种角色，某个用户有什么角色
- HDU-6180 Schedule
- 直播预告丨 Oracle 12C~19C统计信息的最佳实践
- 物联网领域面临标准挑战
- 21最难调剂年：150万人参加调剂，预扩招18万人！
- 折线分割平面(递推dp)
- 算法----其他排序
- 【转载】斐讯K1、K2、K2P 大部分官方固件刷机、刷入Breed 辅助工具教程工具
- Arduino控制PS2无线手柄
- JAVA根据地点获取经纬度
- 设置新的路由器无线网络连接服务器,路由器连接新路由器怎么设置 路由器连接新路由器设置方法【详解】...
- Java随笔记 - 断包和粘包 解决方法
- Microsoft Word 教程:如何在 Word 中更改行距？
- VB Dim的初识与相关用法
- daas 数据即服务_什么是daas
- 区块链在车联网数据共享领域的研究进展
- 【Linux】工作中常用的linux命令