软件=客户端(用户)+服务器 (开发人员 ) 分为 C/S B(browser)/S
服务器开发语言:Java Node.JS(对前端较为重要)
客户端:网页(B/S结构)
网页使用的语言:HTML、CSS、JavaScript
网页简史
万维网发明人:蒂姆·伯纳斯李0
1991.8.6 世界上第一个服务器和第一个网站在欧洲核子研究中心上线
1994 蒂姆·伯纳斯李 建立万维网联名W3C
网页的结构 :
结构:HTML描 述页面的结构
表现:CSS 用于控制页面中元素的样式
行为:JavaScript响应用户操作
一、HTML常用标签
HTML 超文本(超链接)标记语言 使用标签(元素)的形式 标识网页中的不同组成部分。
标签:( 有开始, 有结束 )
标签一般成对出现,但也会有一些自结束标签<img> 或<img/> <input >或<input/> 后者会 生成类似文本框的东西 基本结构如下:
<!--文档声明,声明当前网页的版本--><!doctype html> ——以防止网页进入怪异模式<!--htmld的根标签(元素),所有内容写根元素的里边,网页中仅有一个--><html><!--head是网页的头部Head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页--><head><!--meta,写在head标签里标签用来设置网页的元数据(底层的数据,不会变的数据)可以例如用来设置网页的字符集,避免乱码问题,可提高网站性能不是给用户看的--><meta charset="UTF-8"><!--charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容或者称为值--><meta name="keywords" content="HTML5,前端,CSS3"><meta name="description" content="这是一个不错的网站!"><!--keywords表示网站的关键字,例如搜索引擎中的关键字,content中的内容为关键字的内容,用逗号隔开,description用于网站的描述,会显示在搜索引擎的搜索的结果中 --><!--将此网站重新定向到另一个网站,3为间隔的时间秒数,此处定义到百度网站--><meta http-equiv="refresh" content="3,url=“https://www.baidu.com”><!--title网页的标题,通过TITLE判断网页的主要内容,会作为搜索结果的超链接上的文字显示--><title>网页的标题</title>——帮助浏览器快速定位</head><!--body 是html 的子元素,表示网页的主体,网页中所有的可见内容都应该写在BODY里--><body><!--h1网页的一级标题--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 这里是一个语音语调的强调作用,强调这个“真”字,这个字会变成斜体 --><p>今天天气<em>真</em>不错</p><!---strong表示强调,表示此为重要内容,强调的内容会被放大或者加粗-><p>你今天必须要<strong>完成作业</strong>>!</p><!--用来引用别人的话,比较长的话 ,结果会换行-->鲁迅说:<blockquote>这句话我从来没有说过!</blockquote><!--多用于引用名人名言,比较短的话,结果不会换行-->子曰<q>学而时习之 </q> ——会加上双引号,双引号的实现方法: q::before{ content: open-quote;}q::after{ content: close-quote;}<!---换行标签-><br>*2 会出现两个换行标签 为: <br><br>今天天气真不错!<del>中划线</del> 或者用 <s></s> 文字会有删除线,实现方式:text-derotation: line-through;<center></center><!---标签的分组,可以将一组相关的标题放在hgroup中-><hgroup><h1>回乡偶书</h1><h2>其一</h2></hgroup></body></html>
注释:<!--解释语句 --> 注释要求简单明了 注释嵌套不能嵌套
实体:在html中表示特殊字符
实体的语法
&实体名;
空格 > 大于号 <小于号 © 版权符号
meta标签:属于自结束标签
标题标签一共有六级标签,从H1~H6重要性递减一般情况下一个页面中只 会有 一个H1——
标题标签的作用仅次于title
在运行页面中独占一行的元素称为块元素,(bloce element)例如标题标签和段落标签
不会独占一行的元素为行内元素(inline element)( 独占一行说的是在网页中的位置 )
行内元素用来包裹文字,不可以放块标签,块元素基本什么都可以放
但是p元素不可以放任何的块元素,例如h1,就不可以
浏览器在解析网页时, 会自动修正不符合规范的内容
例如将标签写在htlml外部,比如p元素中嵌套了块元素,例如根元素中出现了除html以外的子元素
结构化标签 (重点掌握每个标签的含义 )
<header></header> 为整个网页或者某个部分的头部
<main></main> 网页的主体部分,一个页面中只有一个main
<footer></footer>为网页的底部或者某个部分的底部
<nav></nav>为网页的导航
<aside></aside>和主体相关的内容(侧边栏)
<article></article>表示一个独立的文章
<section></section>表示一个独立的区块 , 上边的标签都不能表示时用article
<div></div>用来表示一个区块,可以用来代替以上的标签,是目前常用的,多用于块元素
列表(list)在html中三种列表 ,列表之间可以相互嵌套,而且项目符号的图像会发生改变
-
无序列表ul ( 创建类似项目列表)li(item)标签表示列表项 使用type属性可以改变项目符号的形式,disc 默认值,实心圆心 square 是新的方块 circle 空心的圆
-
有序列表ol (创建编号列表)li li有项目符号,有上下外边距,大概是16px
-
定义列表dl (创建定义列表) 使用dt表示定义的内容 使用dd来对内容进行解释说明
二、块元素与行内元素的区别
块元素:
1.独占一行,自上而下一行一行的排列
2.块元素的宽度默认是父元素宽度的100%
3.块元素的高度默认是被 内容撑开的
常用块元素标签 : div p h1-h6 ul li ol header footer main nav
<span></span> 行内元素,没有任何的语义,一般用于在网页中
选中文字,用于行内元素
行内元素:
1、不会独占一行,自左向右排列,一行满了,就挪到下一行,再自左向右
2、行内元素的宽高都是被内容撑开的,不可以自定高度
常用行内元素: span a i em strong del s
行内块元素:
兼具行内元素、块元素特点不会独占一行,又可以设置宽高,
常用行内块标签: img
三、超链接的用法
超链接 使用 a 标签定义超链接,为行内元素,可以嵌套除它自身外的任何元素
, 超链接的属性 (href) 指定跳转的目标路径例,值为其他网页的地址,也可以访问自己的内部网站
紫色为访问过的,蓝色是没有访问过的
如
外部:
<a href="
https://www.baidu.com" >超链接</a> 跳转为百度的网址
当我们需要跳转到服务器内部时,一般我们都会使用相对路径,相对路径都会使用. 或者..开头 ./或.//
./可以省略不写,如果不写./也不写../则相当于写了./
.表示当前页面
./表示当前文件所在的目录
../表示当前文件所在的上一级目录
每个文件阶层用/表示,类似地址 在同一大目录下,其他子目录属于同级关系
target 属性,用来指定超链接打开的位置,属于可选值
-self 默认值,在当前页面中打开超链接
blank 在一个新的页面中打开超链接
<a href="index2.html" target="blank"></a>
将超链接href的属性设置为 # 这样点击链接以后页面不会跳转,而会转到当前页面的顶部的位置
<a href="#bottom">去底部</a> 给要去的位置打一个标记,在href时,使用类似id标签的功能<a id="bottom" href="#">去底部</a>
页面底部: 最后页面中最后一个标签的位置
id 属性,是元素的唯一标识,同一个网页中不能出现重复的id 属性,想要跳转到 页面的指定位置,只需将href属性设置 # 设置它的目标属性值
在开发中,#可以作为超链接路径的占位符使用例如
<a href="#">这是一个新的位置</a>
或者
<a href=javascript:;>新的超链接</a>
四、图片与音频标签
图片标签 用来引入向当前页面中引入图片,使用
img元素,是一个自结束标签,img属于替换元素(块和行内元素之间,具有两种元素的特点 )
<img width="500px" height="400px" src="" alt="">
src 指定的图片引用的位置,
alt是对图片的描述(例如名字)
width 图片的宽度
height图片的高度,高度会随着宽度而改变,在PC端不建议宽、高全都修改 默认情况不会显示, 有些浏览器在图片中出不来,会显示,索引擎会根据alt中的内容识别图片,搜索引擎将会收录这个图片, 搜索时可以出现
图片格式:
jpeg(jpg) 支持颜色丰富,不支持透明效果,不支持动图,一般用来显示照片
gif 支持颜色较少,支持简单透明,支持动图,颜色单一的图片
png 支持的颜色丰富,支持负责透明, 不支持动图,专为网页而生
webp 是谷歌专门用来表示网页中的图片的一种格式,集合其他几种格式的优点,缺点是兼容性不好,比如老的浏览器不太可以用
base64 将图片使用base64编码,可以将图片转换为字符,通过字符形式引入图片,用在和网页一起加载
效果一样, 用小的,效果不一样,用效果好的
内联框架:iframe 在当前网页以窗口似的引入其他的网页,搜索引擎不会检索到被
frameborder可设置边框,0代表没有,,1代表有
<iframe width="800" height="500" src="
https://www.qq.com" framebord
er="0"></iframe>
不会对本地服务器造成压力
音视频标签
音频标签 audio
音视频文件引入时,默认用户不允许用户自己控制播放停止
controls 表示控制是否允许用户播放 加上就允许,没有就不允许
autoplay
音频文件是否自动播放,如果设置音频在网页打开时自动播放,但用户体验感不强
loot 可循环播放
<audio src="12.mp3" controls autoplay loop></audio>
或者 (因为浏览器之间可能不兼容,以下方式在不兼容时,会出现提示文字!
<audio controls>
对不起,您的浏览器不支持,请升级浏览器!
<source src="12.mp3">
老版本浏览器多用这种模式,例如 I8浏览器
<embed src="12.mp3" type="audio/mp3" width="200'" >
视频文件 video 使用方式与音频文件一样
<video src="11.mp4" controls autoplay loop ></video>