WEB前端--HTML
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>元信息
一、<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标记
一、标题
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。
使用列表
以上是关于WEB前端--HTML的主要内容，如果未能解决你的问题，请参考以下文章
VS Code配置snippets代码片段快速生成html模板，提高前端编写效率
[vscode]--HTML代码片段（基础版，reactvuejquery）
前端开发必备！Emmet使用手册(转自 http://www.w3cplus.com/tools/emmet-cheat-sheet.html)