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>：指明文档的主体区域

二、编写方法

  1. 文档工具，如：记事本
  2. IDE

三、浏览html文件

1、运行效果

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

2、看源文件

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

HTML基本标记

一、<head>标记

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

二、<title>标记

  1. 用来说明页面的用途，显示在浏览器的标题栏中。
  2. 位置：<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

&nbsp;
2、插入特殊符号
“ &quot;
& &amp;
< &lt;

>

 &gt;
× &times;
§ &sect

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

使用列表

来自为知笔记(Wiz)

时间： 2024-12-18 06:35:40

WEB前端--HTML的相关文章

一张图掌握移动Web前端所有技术（大前端、工程化、预编译、自动化）

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h

一个8年web前端从业者的迷茫

来自一个8年前端从业者的迷茫 本人aming,创办了切图网 qietu.com,很少写这种自传性的帖子,希望能看完,因为会涉及到一些前端经验之谈. 8年前端从业者,8年光景不长,但是在web前端这个行业也不少了 ,我也是一个创业者,没有就职过BAT 是一个遗憾, 现在身边有些同学就职BAT 当高管,所以我想现在进到BAT应该还是有机会的 :) , 不过我还是毅然选择了创业. 理由很简单, 我骨子里不愿意给别人打工,我知道越早跳出来越容易,不然等到职位越来越高,薪水越来越高的时候,你不一定还有那个

Web前端面试题目及答案汇总

前端新人在面试前都比较焦虑,担心回答不上面试官的问题,也担心自己紧张,其实这都是心理没底的表现,今天和大家分享web前端开发常见面试题及答案,希望可以帮助即将面试的前端同学顺利通过面试. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或

Web 前端开发学习之路（入门篇）

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

web前端工程师应该会的9个软技能

做为一名web前端工程师(http://www.maiziedu.com/course/web-px/),往往我们可能只专注于修炼自己的内功,而忽视了软技能.硬技能决定你是否能得到工作,而软技能能够表明你是否适合这份工作和适应工作环境等.所有的公司都有属于自己的文化,并努力将这些文化传承下去,所以他们必须确保每一位新员工能够适应这个环境. 许多硬技能很容易获得并可很快的提高,而软技能由于和你性格等联系紧密,可想要改变他们是一件很困难和缓慢的事情.这里有七个核心的软技能,适用于大多数的企业,它们不

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti

传智14期WEB前端培训

本月刚毕业的,最新的前端技术 下载地址:http://www.zygx8.com/thread-4882-1-1.html \web前端14期\01-HTML-基础班\1.html基础一上课资料.rar  \web前端14期\01-HTML-基础班\2.html基础二上课资料.rar  \web前端14期\02-CSS-基础班\3.css基础一上课资料.rar  \web前端14期\02-CSS-基础班\4.css基础二上课资料.rar  \web前端14期\02-CSS-基础班\5.css基础

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端：01_Tab选项卡

Tab选项卡 采用两种方法实现选项卡切换功能,目前只提供了最基本的切换效果,后期增加jquery版和渐变切换效果. 效果图: 纯JS简化版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <html> <head> <ti