美文网首页
html5+css3笔记(一)

html5+css3笔记(一)

作者: 长歌_zhang | 来源:发表于2019-08-04 19:39 被阅读0次

目前全程跟着江哥的课学的,迄今学了html5+css3+js。受益匪浅,粗略整理下笔记,用于复习记忆。

浏览器作用:1.渲染网页 2.用户通过浏览器和网页进行交互。

不同的浏览器有不同的浏览器内核, 浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容,内核不同,从而导致了浏览器兼容性问题出现。

IE内核:Trident

谷歌内核:WebKit / Blink

火狐内核:Gecko

Safarri内核:WebKit

欧朋内核:Presto

服务器:超级计算机,也是计算机,24h不关机,不断电,用于存储数据,可以访问里面存储的数据(页面)。

浏览器访问页面的原理:1.当我们利用浏览器访问页面时,有真实的物理文件传输,浏览器将网页上的内容缓存到本地文件夹,然后再渲染出来呈现给用户查看 2.  .js  .css  .html ,一个网页不是一个文件,而是一堆文件,网页越复杂,则组成网页的文件越多。

浏览器请求数据的过程:1.发送“请求报文”到某服务器 2.服务器处理浏览器请求 3.服务器将处理结果返回给浏览器 4.发送“响应报文”到个人电脑 5.浏览器解析返回的内容呈现给用户

请求报文:请求行+请求头+空行+请求体

响应报文:响应行+响应头+响应体

url

什么是url:在浏览器的地址栏输入的地址就是一个url。

url格式:http://127.0.0.1:80/index.html

url拆分:http://    url协议类型 ; 127.0.0.1   服务器IP地址 ; :80  服务器端口号 ; index.html  需要访问的资源名称

拆分后各部分作用:  IP地址和端口号:IP相当于现实生活中的地址,端口号相当于门牌号,结合即为详细地址。作用:告诉浏览器我们需要访问的那台服务器的详细地址;index.html作用:找到服务器之后,通过资源名称告诉服务器,我们需要获取服务器上的哪个资源。

http协议(超文本传输协议)

什么是协议:用来约束/规范事物的。

http协议是用来约束/规范哪一类事物的:http协议提前规范两个人之间如何沟通,也就是约束/规范浏览器/服务器之间如何沟通。

纯文本文件:能够被记事本打开且能正常显示的都是纯文本文件;html文件能够被记事本打开且能正常显示,所以.html是一个纯文本文件。

html(超文本标记语言)

html作用:在纯文本文件中,所有文字都是同级别的,显示的html文件的格式不正确,不知道大小写,段落。专门用来描述文本的语义的,可以利用html告诉浏览器哪些是标签、段落。这些用于描述其他文本语义的文本(即标签),在浏览器中不会显示。所以因为html的这些标签是专门用来描述其他文本语义的,并且在浏览器中不会被显示出来,所以称这些文本为“超文本”,而这些文本又叫做标签,所以html被称为“超文本标记语言”。作用只有一个——专门用来给文本添加语义的,而不是修改文本样式的。

H1标签的作用:告诉浏览器,哪些文字是标题,也就是H1标签是专门用于给指定的文字添加标题语义的。(css是修改样式的)。

html网页 标签

head标签:用于给网站添加一些配置信息,指定网站的标题/指定网站的小图片/添加网络SEO相关的信息(指定网络的关键字/指定网络的描述信息),外拉一些外部的css/js文件,添加一些浏览器适配相关的内容。注意点:一般情况下,卸载head标签内部的内容都不会显示给用户查看。

title作用:专门用于指定网站的标题,并且这个有指定的标题将来还会作为用户保存网络的默认标题。

head专门用于定义HTML中需要显示给用户的内容(图片/文字/音频/视频)。注意点:给用户查看,一定写在body中。一对HTML标签中只有一对body标签。

HTML标签作用:告诉浏览器这是一个网页,也就是告诉浏览器这是一个HTML文件。注意点:其他标签都必须写在HTML的一对标签里面。

meta标签作用:指定当前网页字符集。在编写网页时没有指定字符集可能会出现乱码现象。

什么是DTD文档声明?<!DOCTYPE html>

由于HTML有很多个版本的规范,每个版本的规范之间又有一定的差异,所以为了让浏览器能够正确的编译/解析/渲染我们的网页,我们需要在HTML文件的第一行告诉浏览器,我们当前这个网页是用哪一个版本的HTML规范来编写的。HTML5向下兼容HTML,XHTM,每个版本的文档声明不同。

DTD文档声明注意点

1.任何一个标准的HTML网页,第一行一定是DTD文档声明,也就是说DTD文档声明必须写在HTML的第一行。

2.DTD文档声明不区分大小写。

3.DTD文档声明不是一个标签,是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

4.虽然DTD文档声明的作用是用于告诉浏览器web浏览器关于页面使用哪个HTML版本进行编写的指令,以便于方便浏览器解析和渲染,但是浏览器并不是完全依赖于这个DTD文档声明,浏览器有一套属于自己的机制。也就是说DTD文档声明不写网页也能正常运行,但是由于W3C规定第一行必须写上DTD文档声明,所以为了遵守规定,无论怎么样我们都应该在第一行写上DTD文档声明。

img标签中的title和alt(alternate)

title:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框的文字显示。

alt:用于告诉浏览器当需要显示的图片找不到时显示什么内容。

关于source路径:路径中不要出现中文,否则可能出现未知问题;相对路径不能跨盘符;企业开发中不用绝对路径,因为可移植性差(将你写的代码拷贝给别人,可能就不能运行)。

a标签使用

作用:用于控制页面之间跳转的。

注意点:1.既可以让文字点击,也可以让图片点击;2.一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方;3.地址前必须加http://或http s://;a标签的href属性除了指定网络地址,还可以指定本地地址。

a标签中还有一个target属性,专门用于控制如何跳转。

-self:用于在当前选项卡中跳转,不新建页面;-blank:新建选项卡,新建页面跳转。

a标签还有一个title属性,与img标签中的title一样,都是用来控制鼠标悬停时显示的提示文本。

base标签

作用:专门用来统一的指定当前网页中所有的超链接(a标签)如何打开。必须写在<head></head>标签中。如果既在base中指定,又在a中指定了target,那么浏览器会按照a标签中的指令执行。

假链接

点击之后不会跳转的链接称为假链接。假链接存在的意义:在企业开发前期,其他页面没有写出来,那么我们就不知道应该跳转到什么地方,所以就只能使用假链接代替,当项目后期,其他界面已经完成时,再将假链接替换为真链接。

格式:1.#  2.javascript

区别:#的假链接将会自动回到网页的顶部,而javascript不会。网页的返回顶部选项一般是用#做的假链接。

锚点

要想通过a标签跳转到指定的位置,那么必须告诉a标签一个独一无二的身份证号码,这样a标签才能再当前界面

相关文章

  • 自学JavaScript之路前记

    HTML5+CSS3正在学习中,现在大一后续会记录HTML+CSS3的笔记。学习JavaScript是前端必学的语言。

  • html5+css3 笔记

    入门知识导读 本地使用hbuilder 内置服务器访问 原理 h5 与 h4 区别:1.h5 比h4 页面 组成...

  • html5+css3笔记(一)

    目前全程跟着江哥的课学的,迄今学了html5+css3+js。受益匪浅,粗略整理下笔记,用于复习记忆。 浏览器作用...

  • html5+css3实现日食动画过程

    html5+css3实现日食动画过程 点击链接加入群【前端交流总群③】:543761540

  • 前端学习路线

    开发工具 HTML+CSS Javascript JQuery HTML5+CSS3 UI组件 AJAX&JSON...

  • HTML5+CSS3 loading 效果收集

    整理自:instantshift作者:神飞原文地址:HTML5+CSS3 loading 效果收集 用gif图片来...

  • 电子商务网站开发与建设

    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...

  • 学习网站

    HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uwJ...

  • 前端学习资料收集

    我只是保存资料 并不学习 因为:懒 HTML5+CSS3视频教程:http://pan.baidu.com/s/...

  • html5+css3实现日食动画过程源码

    html5+css3实现日食动画过程源码,学习群:543761540 点击链接加入群【前端交流总群③】:https...

网友评论

      本文标题:html5+css3笔记(一)

      本文链接:https://www.haomeiwen.com/subject/lvnrzttx.html