W3C万维网联盟,发展迭代web网页规范,四个重要组成部分,我们的北航就是一个据点,所以拥有一个中文网站,W3C中国,到一定层次的水平时候想要深入理解,必定要查阅规范,奉上上传文件查阅自己编码的文件是否符合标准的官方网址!
浏览器地址输入的链接就叫网址,中文名字叫统一资源定位符。
格式:协议://主机地址:端口号/目录路径+参数
实例:http://n.huasenjio.top:8080/huasen/index.html
http协议超文本传输协议
ftp协议文件传输协议
file协议访问本机文件传输的协议
SSL加密协议
浏览器是一个显示网站服务器或者档案文件系统内html文件,并且让用户能够交互的软件。
浏览器内核负责对网页语法进行解析,就是内部的渲染引擎,决定网页的显示效果,常见内核类型:
1)IE浏览器:微软出品的Trident内核 -ms-
2)Chrome:谷歌出品的Webkit内核>>Blink内核 -webkit-
3)Firefox:Mozilla出品的Gecko内核 -moz-
4)欧朋浏览器:欧朋出品的Presto内核 -o-
5)Safari:苹果出品的Webkit -webkit-
提供网上信息浏览服务,web服务器可以解析http协议,当浏览器接收到一个浏览器的一个http请求,服务器接收并去对应的目录下找到对应的资源后返回一个http响应。
网页主要由三部分组成,结构标准(XML、HTML、XHTML),表现标准(CSS),行为标准(DOM、JavaScript),要进行网页开发就要遵守开发标准!
1)vs code
2)webstorm
3)chrome浏览器
可以拓展的超文本标签语言,更严格更纯洁的HTML语言,具有以下的特点:
1)XHTML标签必须被正确的嵌套
2)XHTML必须被关闭
3)标签名必须小写
4)XHTML必须拥有根元素
标签之间可以嵌套使用,一般来说块级元素包裹行级元素。
<div> <span> <img /> </span> <div>html5中增加了许多语义化标签,代表说明着不同的网页内容,有着一下的优势特点:
1)html结构更加的清晰
2)有利于搜索引擎的抓取
3)增加代码的可读性
4)代码更为简洁渲染更快
5)有助于屏幕阅读器识别
1)单标签
<!DOCTYPE html>
<img src="" alt="" />
2)多标签
<div></div>
<span></span>
<!DOCTYPE>告知浏览器采用html5版本解析
<html></html>根标签
<head></head>头标签
<body></body>主题
<meta></meta>元素可提供有关页面的元信息仅存在与head标签内
<title></title>网站标题
<link></link>引入外部资源标签
<script></script>网页脚本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="花酱与猪是一个简洁而且可以高度自定义的网络导航站点"/> <meta name="keyword" content="花森与猪,文艺小站,花森酱简洁导航,资源导航,花森笔录"/> <title>页面文档结构</title> </head> <body> </body> </html>用于定义某一块区域的页眉
页面导航链接信息等容器
页面主要区域,一般在一个页面中最好出现一次。
标签表示一个独立内容的容器
定义一块区域,一般包裹具有相似内容的块,例如商品展示区域,应该需要section作为商品的容器。
一般用于呈现一些与页面关联性不高的内容
通用容器,页面最常用的容器标签,通常用于包裹一些行级元素,做一些页面的结构。
footer 标签定义文档或节的页脚,一般包含一些作者信息,地址信息,版权信息等信息。
<p></p>段落标签,浏览器默认在其前后创建一些空白,标签中需要通过<br/>进行换行,多个空格最终均会渲染成一个空格,需要多个空格时可使用 代替空格。
<p>花森导航关于页<br/> 如今已经大三,脑子还依旧很清晰地记得,因为个人比较喜欢打王者荣耀,耽误了很多时间,正如年年岁岁花相似,岁岁年年人不同。只道是不悔梦归处,只恨太匆匆。但没有退路,让我想起一句话,没有伞的孩子,只能向前奔跑。</p>1)<h[1~6]></h[1~6]>标题标签,<h1>顶层标题,强调性最强,字体颜色最重。
<h1> 花森 </h1> <h2> 猪琦 </h2>html中的回车是不会被识别的,需要通过<br/>进行换行效果。
span 常用于对某些文本特殊控制,没有特定的语义,标签属于行级标签,因此默认是无法设置宽高。
常用于设置描述商品,对一块区域进行声明。
定义时间日期等文本信息
描述一个缩写的内容,通过鼠标悬浮显示title属性值。
<abbr title="花森">HS</abbr>显示代码内容,markdown文本中将代码渲染成code标签,进而被代码格式化插件识别显示。
强调文本标签,默认带有加粗的效果。
类似于CSS中的斜体效果
包裹的一段文本会被加上引号
一般放置于footer标签下,包裹作者、公司地址等信息。
<a href="链接地址" target="_blank"></a>链接标签,用于定义网页链接的标签,href属性指定链接的地址(相对路径和绝对路径),target属性指定打开链接的方式,默认_self本页打开网页,_blank新开一个网页标签来显示内容,无跨域效果。可以 通过head标签中添加<base taget="_blank">,所有a标签会继承base标签的特性,而继承的权重为零,可以通过a标签独立再设置进行覆盖。设置空链接链接<a href="javascript:void(0)"></a>,很久以前用于当buttom按钮标签,还有锚点等特性!
参数属性类型说明href跳转地址target_blank 新窗口打开 _self 当前窗口打开title链接提示文本锚点可以设置跳转到页面的某一个部分,点击后将会自动滚动到id为aim的元素的区域。
<a href="#aim" target="_blank">锚点链接</a>点击后可以自动打开系统的邮箱软件进行发送邮箱
<a href="mailto:184820911@qq.com">点击向花森发送邮件</a>自动打开系统的拨号功能
<a href="tel:123208820">联系客服</a>链接可以是相对地址和绝对地址,同样图片链接也可以,常用展示jpg、png、svg、gif等格式图片。
<img src="图片地址" width="100%" height="100%" title="鼠标悬停在图片上时显示" alt="图片不显示时展示"/>通过type实现无序列表中列表项的前缀符号,type在有序列表中表示决定通过什么顺序符号排列。
通常列表项前会有数字、字母作为顺序符号。
<ol type="A"><li></li><ol>dl列表组,dt定义标题,dd定义列表项。
<dl><dt><dd></dd></dt></dl>for属性值与一个控件a的id一致时,点击label标签,控件a会获得焦点,将控件包裹在label标签中就省去for和id的对应关系。
multiple决定是否多选,selected决定默认选择项,value决定选择的值!
<select name="link" multiple> <option value="ball">球</option> <option value="fish" selected>鱼</option> <option value="pig"">猪</option> </select>默认可以输入30个字符,超过10行之后就开始出现滚动条。
<label for="textarea">文本域</label> <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>以下内容最近逐步更新~
一切资源均来源于各大免费论坛社区,只提供互联网数据收录查询服务且不会存在储存用户数据和贩卖数据。资源仅供大家学习交流,请勿用于商业用途,造成损失及法律责任与本人无关。如有侵犯您的权益,请联系小生,吾将积极配合!
前段时间在金蝶软件园实习结束,回来就开发了一款网络导航应用,因为由于搜索引擎的竞价很严重,所以获取到优质内容已经不再容易了,这也是我开发这个网站的初衷,网站无广告,推荐的网站和工具都是很良心,涉及生活的方方面面,生活上的娱乐追剧,学习上的奋笔直书,它都是你的好帮手,我相信你给它几分钟的时间浏览,你就会喜欢上它了。尽管我只是一个大三的学生,但服务器运维费均是我自掏腰包,凭着一份爱好在支撑!vue项目第一次进会慢一些,同样也想听到大家的宝贵意见,不出意外的话我会将它开源,希望大家能够支持鼓励!
花酱与猪 - 自定义网络资源导航
🐧企鹅:184820911
📕邮箱:184820911@qq.com