本文深入讲解前端网页的基础知识，涵盖网页的运转原理、HTML语法特点、常用标签及其使用方法，包括标题、段落、文本、图片、超链接等元素的详细解析。
1.前端 web
1.网页
2.网页的运转
1.服务器：用于接收用户请求并响应，提供数据支撑
2.浏览器：电脑上的程序，客户端，帮用户发请求并且处理服务器端返回的数据，图形化呈现给用户
3.通信协议：网络请求最常用的 HTTP HTTPS
3.服务器及浏览器产品
1.服务器：Tomcat Apache Nginx IIS
2.浏览器：
五大浏面结构 文档后缀都是 .html/.htm
3.特点：大量的标记确定页面结构和组成
4.浏览器页面中使用F12或者右键检查打开开发者工具
5.语法特点：
1.标签由 <标签名> 组成
2.分类：
1.双标签<html></html>成对出现，由开始和结束标签
2.单标签<meta>只有开始标签没有结束标签
3.单标签闭合<meta/>
4.XML 语法严格 文档标签区分大小写 必须闭合
3.标签语法：<title charset="utf-8">标签内容</title>
<标签名 属性名="属性值">标签内容</标签名>
标签属性用来对标签本身做补充说明
4.文档会忽略多余的空格，只显示一个空格
6.语法介绍
1.所有的网页内容都需要放在<html>标签中
2.<head>标签中存放网页文档的头部信息，
例如编码方式，链接的外部文件，网页关键字，用户不可见，
浏览器选项卡上的信息，例如 网页标题，网页LOGO是用户可见的
3.HTML不区分大小写，推荐小写
4.<!doctyon html> HTML5 的文档声明方式
5.W3C 国际组织，主要是制定和规范HTML CSS语法
7.标签类型
1.块级元素
1.独占一行不与其他元素共行显示
2.默认宽度于父元素保持一致
3.可以手动设置宽高尺寸
2.行内元素
1.可以与其他元素共行显示
2.宽高由元素的内容决定，不能手动设置宽高
3.行内块元素
即可以共行也可以手动设置宽高
按照浏览器内核进行划分
浏览器内核/引擎：
渲染引擎：对HTML CSS 进行处理
JS引擎：对JS进行处理
1.Chrome webkit --> blink
2.FireFox Gecko
3.IE Trident
4.Safari webkit
5.Opera Presto
4.网页的构成
静态页面：结构 HTML 和 样式 CSS
动态交互：JS
2.HTML
1.超文本标记语言 Hyper Text MarKup Language
2.HTML 用来书写页
3.常用标签
1.标题标签<hn></hn>
2.段落标签<p></p>
3.文本标签
<span></span>
<label></label>
<i></i>
<b></b> <strong></strong>
<u></u>
<s></s> <del></del>
<sub></sub> <sup></sup>
4.格式标签
<br/>
<hr/>
字符实体： ¥©⁢>
5.列表标签
1.无序列表
设置type属性修改项目符号
disc(默认)
square
circle
none
<ul type="">
<li></li>
</ul>
2. 有序列表
设置type属性修改项目符号
1 (默认)
a
A
i
I
设置start属性，决定从几开始排序，取值是数字
<ol>
<li></li>
</ol>
3. 定义列表
dt表示对数据分组
dd表示具体数据
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
6. 图片标签
<img src="路径">
url 组成 ：协议 域名 目录路径 文件名
路径分为相对路径和绝对路径
绝对路径 ：
从根目录开始查找
注意 ：
1. 斜杠的问题
2. 目录与文件名称
3. file：///协议是windows上打开本地文件的协议，类似于文件管理器
相对路径 ：
从当前文件所在的目录位置开始查找
../表示从当前文件夹返回上一级目录
7. 超链接
使用超链接标签 a href="url"
1. 指定网络URL进行跳转，一定要写协议
2. 设置新网页的打开方式 是否在当前选项卡窗口打开 默认_self 在当前窗口打开，会覆盖当前文件， _blank表示新建窗口打开
3. href 属性为空，表示链接到当前页，会进行页面刷新
4. href 属性为 # 还是链接到当前页，不会进行页面刷新
5. 文档内部锚点链接
在当前页设置锚点链接 跳转到当前文档的指定位置
1. 在指定位置添加空标签，并且设置name 或者 id属性
2. 在超链接中设置 href = "#锚点值" 锚地值就是 name/id属性值
<!-- 1. 指定文档类型 2. 设置CSS对网页元素的渲染方式 -->
<!doctype html>
<html>
<head>
<!-- title 用来设置网页标题 -->
<title>我的第一个网页</title>
<!-- meta charset 设置网页编码方式 -->
<meta charset='utf-8'>
<!-- 网页选项卡logo -->
<link rel='shortcut icon' href='web.ico' type="image/x-icon">
</head>
<body>
网页主体 HTML就是这么简单
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
普通文本
<!-- 常用的标题标签 默认加粗 <hn></hn> n取值1-6 字体大小逐渐减小-->
<!-- 文本默认居左对齐 align 设置文本水平对齐方式-->
<h1 align="left">北极星</h1>
<h2 align="center">火箭少女</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>
落霞与孤鹜齐飞
</p>
<!-- 文本格式标签 -->
<b>加粗文本</b>
<strong>strong 标签同样加粗</strong>
<u>文本自带下划线</u>
<i>斜体文本</i>
<s>删除线文本</s>
<!-- 换行标签 -->
<br/>
<del>删除文本</del>
<span>
x<sub>1</sub> + y<sub>1</sub>
x<sup>2</sup> + y<sup>2</sup>
</span>
<label>label标签</label>
<hr/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- HTML 字符实体 以&开头 ；结束-->
<!-- 1. 尖括号 < 表示 <-->
<h1>HTML < Day01 ></h1>
<hr>
<!-- 2. 空格字符实体 -->
<h2>1. 作业 内容</h2>
<h3>1.1 成根据效果完制作</h3>
<p>根据效果完</p>
<!-- © 版权符号 -->
<p>版权所有© ： 达内科技</p>
<p>价格 ¥1.00</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<meta charset="utf-8">
</head>
<body>
<!-- 1. 无序列表 unordered list
默认采用实心原点 disc作为项目符号
square 表示实心方块
circle 表示空心圆
none 表示取消项目符号
-->
<ul type="none">
<!-- 每条数据成为一个列表项 list -->
<li>Java</li>
<li>C</li>
<li>C++</li>
</ul>
<!-- 2. ordered list
type取值 默认 1
i I a A
start 设置从第几个开始排序 取值数字
-->
<ol type="A" start="3">
<li>林志玲</li>
<li>赵薇</li>
<li>凤姐</li>
<li>林青霞</li>
<li>葫芦娃</li>
</ol>
<!-- 3. 定义列表 define list -->
<dl>
<dt>订单跟踪</dt>
<dd>查看物流</dd>
<dd>订单编号</dd>
<dd>接通客服</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>img标签</title>
<meta charset="utf-8">
</head>
<body>
<!-- 图片标签 <img src="路径">
url 组成 ： 协议 域名 目录路径 文件名
-->
<!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533033865081&di=44ec03b250fbed190dbe6abaa9478d67&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc195951d604a8012193a3a885a2.jpg%401280w_1l_2o_100sh.jpg"/> -->
<!--标签属性 width height 不适用所有元素 但是可以使用CSS调整-->
<h1 style="width:300px;height: 300px;">大标题</h1>
<p style="width:300px;height: 300px;">
url 组成 ： 协议 域名 目录路径 文件名
</p>
<span width="300px" height="300px">span 文本</span>
<span style="width:300px;height: 300px;">css|设置宽高</span>
<p>
路径分为相对路径和绝对路径<br>
绝对路径 ：从根目录开始查找 <br>
注意 ： 1. 斜杠的问题 2. 目录与文件名称<br>
file：///协议是windows上打开本地文件的协议，类似于文件管理器
</p>
<img src="C:/Users/Administrator/Desktop/前端课程资料/img/northStar.jpg">
<img src="file:///C:/Users/Administrator/Desktop/前端课程资料/img/northStar.jpg">
<p width="300px" height="300px">
相对路径 ： 从当前文件所在的目录位置开始查找
<br>
../ 表示从当前文件夹返回上一级目录
</p>
<img src="img/happy.gif" width="300px" height="300px">
<img src="img/images/huiyuan.jpg" width="300px" height="300px">
<img src="img/wxy.jpeg" width="300px" height="300px">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!-- 超链接 主要用来链接到其他相关页面 -->
<h1>超链接标签</h1>
<!-- 使用超链接标签 a href="url"
1. 指定网络URL进行跳转，一定要写协议
2. 设置新网页的打开方式 是否在当前选项卡窗口打开 默认_self 在当前窗口打开，会覆盖当前文件， _blank表示新建窗口打开
3. href 属性为空，表示链接到当前页，会进行页面刷新
4. href 属性为 # 还是链接到当前页，不会进行页面刷新
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="05img.html">连衣裙</a>
<!-- 在当前页设置锚点链接 跳转到当前文档的指定位置
1. 在指定位置添加空标签，并且设置name 或者 id属性
2. 在超链接中设置 href = "#锚点值" 锚地值就是 name/id属性值
-->
<a href="#anchor1">早年经历</a>
<a href="#anchor2">演绎作品</a>
<a href="#">#当前页</a>
<p>
1973年在根据琼瑶的处女作改编而成的影片《窗外》中饰演女主角江雁容而获得成功，自此走上电影路 [4] 。后又出演了刘家昌执导的《云飘飘》，票房新台币400万，打破票房纪录。 [5]
林青霞的100部电影（一）
<a name="anchor1"></a>
------------------------------
林青霞的100部电影（一）(80张)
1975年在台湾中央电影事业股份有限公司拍摄的《八百壮士》中，饰演泅水渡江向驻守军人们赠旗的童子军，获得第22届亚洲影展最佳女主角奖。 [6]
</p>
<p>
<span id="anchor2"></span>
<h2>演绎作品</h2>
1976年后，加入琼瑶自组公司巨星电影公司成为拍摄其影片的御用女主角。与秦祥林、秦汉等合作，接连主演了《我是一片云》《月朦胧、鸟朦胧》等10几部根据琼瑶小说改编的影片，成为琼瑶笔下女主角的化身。在当时台湾影坛上，她和林凤娇以及秦汉、秦祥林并称“二秦二林”。 [7]
</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
