前端开发HTML&css入门——HTML
HTML究竟为何物？其实HTML就是一种标记语言，英文全称为Hypertext Markup Language，翻译过来就叫超文本标记语言。它的作用就是负责负责网页的三个要素之中的结构。 HTML使用标签的的形式来标识网页中的不同组成部分。 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。点一下试试。
那么既然是文本标记语言，我们自然能用txt来编辑HTML语言。打开windows自带的记事本工具，键入以下内容：
这是我第一个网页
因为我们编写的是HTML网页，所以一定要将后缀名改为HTML（以前还有htm后缀名，因为早期系统不支持那么长的后缀名，但是二者是相同的）：
让我们看一下图标：
，变成了浏览器的logo。证明此文件可以用浏览器打开。我们打开这个网页：
？？这哪是网页啊？你在骗我把？为什么和我们看到的网页不同？因为我们只加入了文本，我们未加入标签内容以及排版样式。
接下来让我们先来上一组基本的html标签，这样的一组标签能构成一个最基本，最简单的一个网页。每个标签都是由一组<>来构成（就是M右边的两个键）。
<html>
<head>
<title>这是一个非常好的网页</title>
</head> <body>
<h1>这是我的第一个网页</h1>
</body>
</html>
有些头疼？那么咱们来拆开来一个个讲：
标签
我们现来说说第一个标签：html根标签
<html> </html>
在每一个页面中有且只有一个html根标签，网页中的所有内容都应该写在html根标签中。
然后我们再往里加第二个标签：head标签，
<html>
<head>
</head>
</html>
该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的。
然后我们再加点东西，我们的第三个标签：body标签。
<html>
<head>
</head>
<body>
<body>
</html>
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写。需要注意的是，body标签是写在html根标签内的。
然后我们再加点重要的东西进去，我们的第四个标签：title标签。
<html>
<head>
<title></title>
</head>
<body>
<body>
</html>
title网页的标题标签，默认会显示在浏览器的标题栏中。搜索引擎在检索页面时，会首先检索title标签中的内容，它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名。title中的内容不会在网页出现，而是会在网页的标题栏出现。
然后我们再加点东西进去，h1标签：
<html>
<head>
<title>这是一个非常好的网页</title>
</head> <body>
<h1>这是我的第一个网页</h1>
</body>
</html>
h1标签就是，正文标签里面的内容会出现在网页中。这样我们的最简单最基本的网页就完成了。
我们再提几个简单的概念。head标签，就是html根标签的子标签。反过来讲html根标签就是head标签的父标签（head和title之间同理，不再赘述）而body标签和head标签都在html根标签里，所以我们把body标签和head标签成为兄弟标签。title标签和html的关系就像爷孙，但是我们不这么叫。我们说html标签是title是祖先标签，反过来title就是html的后代标签。
在我们敲代码时，最好不同级别的标签之间有层次和段落。在每一个不同级的标签加一个tab。而同级的标签把它们放在同一位置。
注释：
在每一个语言里都有注释，html也不例外。注释方便他人方便自己。
<html>
<head>
<title>这是一个非常好的网页</title>
</head> <body>
<!--
在这个结构中，可以来编写HTML的注释
--> <h1>这是我的第一个网页</h1>
</body>
</html>
注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定要简单明了。
就这样我们第一个网页就编写完成了，我们看一下效果：
有点单薄，我想将部分字体加粗或者改变颜色怎么做那？属性标签就可以做到。
<html>
<head>
<title>这是一个非常好的网页</title>
</head> <body>
<h1>这是我的第<font color="green" size="7">一个网页</h1>
</body>
</html>
在需要改变格式的文字加入font标签，color可以设置颜色，size可以设置大小（最大值为7），face是用来改变字体。但是我们不推荐使用此标签，因为CSS才是用来改变样式的。
文档声明：
声明当前的网页是按照HTML5标准编写的，编写网页时一定要将h5的文档声明写在网页的最上边。如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明。
<!doctype html>
<html>
<head>
<title>这是一个非常好的网页</title>
</head> <body>
<h1>这是我的第一个网页</h1>
</body>
</html>
当你做好网页之后再打开时，很有可能出现这种情况：
这是因为我们编写的代码的时候选择的编码格式和浏览器的解码格式不统一，所以造成浏览器无法解释，我们可以将记事本编码格式统一为utf-8。
notepad另有玄机
当你在window下使用自带记事本进行编辑时，想要保存一个以UTF-8编码的文件就会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即BOM）。它是一串隐藏的字符，用于让记事本等编辑器识别这个文件是否以UTF-8编码。这种做法就是方便了windows自带的记事本软件，给其他语言带来巨大的麻烦。（比如说PHP）推荐使用notepad++或者editplus 来代替记事本。。
且就算编码没问题，解码也需要更改否则还是处于无法解码的情况，我们就引入了下一个自结束标签并设置字符集为utf-8：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
</head>
<body>
<h1>这是一个非常漂亮的网页</h1>
</body>
</html>
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介。meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/。（只有开始，没有结束）charset用来更改浏览器字符集（解码）。
其他常用的标签：
标题标签：h1~h6
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
h1 ~ h6,在显示效果上h1最大，h6最小，但是文字的大小我们并不关心（会使用CSS来改变大小）,使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签,6级标题中，h1最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低。
一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用
效果：
段落标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的标签</title>
</head>
<body>
<p>我是一个p标签，我用来表示一个段落</p>
<p>我是一个p标签，我用来表示一个段落</p>
段落标签用于表示内容中的一个自然段，使用p标签来表示一个段落，p标签中的文字，默认会独占一行，并且段与段之间会有一个间距。
效果：
换行标签和水平线标签（自结束标签）：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的标签</title>
</head>
<body>
<p>我是一个p标签，我用来表示一个段落</p>
<p>我是一个p标签，我用来表示一个段落</p>
<hr /> <p>
锄禾日当午，<br />
汗滴禾下土，<br />
谁知盘中餐，<br />
粒粒皆辛苦。<br />
</p>
<hr />
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签。hr标签也是一个自结束标签，可以在页面中生成一条水平线。
效果：
转义字符
如果我们需要使用>和<怎么办，因为大于号和小于号与标签的符号冲突，所以我们必须使用转义字符。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>实体</title>
</head>
<body>
<!--
实体的语法：
&实体的名字;
< <
> >
空格
版权符号 ©
-->
a<b>c
<p>©÷今天天气 好晴朗，处处好风光</p>
</body>
</html>
效果：
图片标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body> < img src="2.gif" alt="美女" width="100px" height="500px" /> </body>
</html>
使用img标签来向网页中引入一个外部图片，img标签也是一个自结束标签。宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小如果两个值同时指定则按照你指定的值来设置一般开发中除了自适应的页面，不建议设置width和height。
img属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录。
width：可以用来修改图片的宽度,一般使用px作为单位
height ：可以用来修改图片的高度，一般使用px作为单位
src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。相对路径：相对路径指相对于当前资源所在目录的位置。
可以使用../来返回一级目录,返回几级目录就写几个../
例：<img src="../../img/2.gif" alt="美女"/>
图片格式：
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
前端开发HTML&css入门——HTML的更多相关文章
- 前端开发HTML&CSS入门——具体是做什么的
软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- 前端开发HTML&css入门——CSS&选择器练习
CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...
- 前端开发HTML&css入门——常用的标签以及一个小练习
meta标签 <!doctype html> <html> <head> <meta charset="utf-8" /> < ...
- 前端开发HTML&css入门——一些其他常用的文本标签
em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签 em主要表示语气上的强调,em在浏览器中默认使用斜体显示strong表示强调的内容,比em更 ...
- 前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
- 前端开发HTML&css入门——CSS的文本格式化
长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...
- 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
随机推荐
- Introduction-to-Psychology Slides
最近在网易公开课学习耶鲁大学Paul Bloom教授的<心理学导论>,英文水平有限,视频中一直没有出现PPT,无意中找到一份课件,现分享于此,大家自取! 链接:https://pan.ba ...
- 基本的axios用法
首先安装axios: 1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save //它的作用是能把json格 ...
- sqli--labs(25)
过滤了 or and 的get注入 0X01测试阶段 ’报错 ” 不报错 那么就是'闭合 好的我们知道闭合后来#闭合后面 ?id= 语法不正确 发现过滤了 or and 那么我们继续构造 ?id= 0 ...
- python正则之match search findall
match:只匹配一次,开头匹配不上,则不继续匹配 a,b,\w+ match(a,"abcdef") 匹配a >>> re.match("a" ...
- ZXing使用详解与范例(C#)
介绍 ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码.(引自百度百科) 用 ...
- linux 汇编函数调用
edi第一个参数 esi第二个参数 edx第三个参数 rax保存结果 C++代码如下: char* demo(char* a,int b){ static char* buf=0; if(!buf)b ...
- Mybaits基本的CURD操作
1 首先在Mapper.xml配置 <!-- parameterType:参数类型,可以省略, 获取自增主键的值: mysql支持自增主键,自增主键值的获取,mybatis也是利用stateme ...
- 【原创实现】C 多线程入门Demo CAS Block 2种模式实现
分Cas和Block模式实现了demo, 供入门学习使用,代码全部是远程实现. 直接上代码: /* ================================================== ...
- python学习笔记：（六）str（字符串）常用方法
注意点: 1.字符串是不可变的: 2.%格式化操作符:左侧放置字符串,右侧放置希望被格式化的值. 对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应 ...
- WebMvcConfigurer 与 WebMvcConfigurationSupport避坑指南
我们知道,在Spring Boot 2.0后用自己的的配置类继承WebMvcConfigurerAdapter时,idea会提示这个类已经过时了. 通常情况下我们会采用下面两种代替方案: 实现WebM ...