前端入门二（html）

*这篇文章主要让大家认识网页的构成，知道什么是html，便于同学们入门，有个了解）

1、整个网页的结构就是通过html作为基础搭建起来的，js与css只是html的装饰，但是也是必不可少的（html主要由html>head>body>组成）当然在body里面可能会用到很多html标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=yes"/>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./styles/reset.css">
    <script src="./styles/hotcss.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1103079_svcustilvsq.css">
    <title>七天洗车</title>
    <script>
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
  </body>
</html>

2、html标签

1. 块状元素(block)

(1) 块状元素在网页中就是以块的形式显示. 块状元素默认没有自己高度和宽度,默认情况下它的宽度是继承其父元素的宽度,高度是内容撑起来的高度,没有内容的时候高度为0.

常用的块状元素:div, dl, dt, dd, ul, ol, fiedset, (h1-h6), p, form, hr, collgroup, col, table, tr,td等;

(2) 块状元素的特点:

默认的情况下,块状元素都会独占一行,块状元素会按顺序自上而下排列;
块状元素都可以直接设置宽度和高度;
块状元素都遵循盒模型的所有规则,一般作为其他元素的容器(p标签除外);

2.内联元素(inline 或称行内元素)

(1) 常见的行内元素:span, a, i, em, strong, b等;

(2) 类联元素的特点:

内联元素后面如果是内联元素,则会在一行内逐个显示;
内联元素现实的宽度,高度,不能直接定义,它最小的内容单元也会呈现矩形形状;
内联元素遵循盒模型的规则,但是会有部分无法显示;

(当然我们也可以通过改变内联元素的display属性,来实现对其宽度和高度的设置,这个知识点我会放在下一篇和大家分享)

3.块级内联元素（inline-block）

（1）不管什么元素可以根据属性（css属性）display: inline-block变成块级内联元素；原始元素主要有img标签

（2）块级元素的特点：

集合内联和块级元素特点，在一行显示

*所有元素都可以通过display属性来改变

*行内元素不能随意包裹块级元素，会出现不显示等问题

*所有标签链接可参考：https://www.w3school.com.cn/html/index.asp（标签主要使用常用的几个div、p、a，span等标签，入门者可以多练习一下就能记住）

在前面：

小编入坑前端，距离现在已经有两年的时间了，这两年也是从学习到步入工作的两年，不是大神，但一直在努力走在成为大神的路上，开了这个头条号想分享一些关于在前端路上的问题与小经验，希望能帮助到那些和我碰到一样问题的人，也希望一起学习和进步。

我们从最基础的开始：

当你要写一个页面的时候，头部<head>标签中声明的东西是至关重要的。它是所有头部元素的容器，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面我们来逐条分析：

1.强制使用IE最先内核渲染页面：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，但是有熟悉浏览器的就知道，IE浏览器用的额是Trident内核，那这里为什么后面还写了chrome=1呢？原来是谷歌做了个外挂：Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！

各式各样的移动端

2.为了让你的网站页面适用于移动端口，需要加上这一句：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

首先要清楚的是，viewport指的是哪一部分，viewport翻译过来的意思是视口，也就是我们平时看手机，看电脑的可视区域，由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。

device-width规定宽度显示的是设备的宽度；

initial-scale规定了初始缩放比例为1；

maximum-scale规定最大缩放比例为1；

user-scalable规定用户是否可以手动缩放 (no，yes)。

3.规定页面中的数字是否识别为电话号码：

<meta name="format-detection" content="telephone=no" />

规定在设备浏览页面时对数字不启用电话号码的功能，在有些页面需要网站点击数字识别电话号码，点击跳转到拨打电话界面，这时启用电话功能即可：telephone=yes

4.IE页面不支持H5新标签时，用JS来让它支持

HTML5是HTML最新的修订版本，最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。为了更方便的使用H5的新标签，有很多方法可以使用，感兴趣的童鞋可以阅读下面的网址学习：

http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html

5.关于head标签内标签顺序问题

总结上面的内容就不难发现，写在head内申明的标签有：<meta>、<link>、<title>、<script>、<base>等，那这些标签的顺序该如何排列呢？事实上这是没有唯一答案的，一般首先要指定编码，当然服务端也要指定编码，保持一致。所以大多数浏览器都是把<meta charset="UTF-8">放在第一位。

一般按照经验来分配的顺序如下：

<meta>
<title>
<link> \ <style>
<base>
<script>

上面就是关于html文件中<head>标签内一些常见的问题，欢迎补充和指正，请在下方留言评论。

1-HTML基础

第1章基础语法

html是超文本标记语言
<head>,<title>标签里的内容不会在网页文档中显示
<hr/>标签是水平线，不需要成对出现
注释代码：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第2章文章段落

2.1 文档声明和META标签

<html>,<body>,<head>标签是html文档结构标签，<!DOCTYPE HTML>不属于html标签，它用于定义文档类型

网页中不能正常显示中文，出现乱码现象，使用meta标签设置编码格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一个网页</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起来学习html标记语言
</body>
</html>

3.如果想在html页面中显示空格，使用

标题标签：<h1></h1>~<h6></h6>

段落标签：<p></p>

align对齐属性值：

left:左对齐内容

right:右对齐内容

center:居中对齐内容

justify:对行进行延申，这样每行都可以有相等的长度

换行标签<br/>

5.一个<p></p>标签代表一个段落，两个<p>标签中的文本内容不在同一行，在<p>标签中，使用<br/>文本内容的位置只是换行，其实还是一个段落

6.<pre></pre>标签用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML原文档中定义的格式

<!DOCTYPE html>
<html>
<head>
	<title>练习1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早发白帝城》</h3>
	<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
	<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>练习2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     阴山下，<br/>
	     天似穹庐，<br/>
	</p>
	<pre>
  笼盖四野，
   天苍苍，
   野茫茫，
风吹草低见牛羊。
	</pre>
</body>
</html>

2.2 文字和段落标签

文字斜体：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下标：<sub></sub>
上标：<sup></sup>

特殊符号

任务

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">关于我们  |  招聘信息  |  联系我们  |  意见反馈</p>
	<hr/>
	<p align="center">Copyright © 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表标签

3.1 列表标签-无序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
	<ul type="square">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
</body>
</html>

3.2 列表标签-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
	<ol type="i">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
</body>
</html>

3.3 列表标签-定义列表

<dt><dd>是同级标签

第四章图像和超链接

4.1 图像

图像标签

绝对路径：

相对路径：

效果图

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅图像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅动画图像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超链接

超链接标签

空链接：<a href="#"> </a>

4.3 锚链接

定义锚（同一页面）

任务：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">这里是顶部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">运动</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>苹果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>樱桃</li>
		<li>菠萝</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回顶部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西红柿</li>
		<li>黄瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫芦</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回顶部</a></p>
</body>
</html>

定义锚（不同页面）

4.3 链接扩展功能

1. 电子邮件链接

2.文件下载

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">邮箱链接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下载</a>
</body>
</html>

原文链接：https://blog.csdn.net/qq_43405634/article/details/103789819

在线咨询

上一篇：HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作
下一篇：最好的编程语言是哪一种？PHP，Python还是C++？我觉得是

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商