夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色
【HTML+CSS】萌新学习前端的笔记一份

一、 HTML是什么? HTML5又是什么?

HTML是什么?HTML是目前最流行的网页制作语言。HTML(Hypertext Markup Language)即 超文本标记语言,是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记 语言,通过结合使用其他的Web技术可以创造出功能强大的网页。


HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示 Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频, 音频,图像,动画,canvas/SVG 地图技术,以及同电脑的交互都被标准化。




二、 了解html css javascript
(1)、HTML : “超”文本 标记“语言” ,结构(HyperText Markup Language)——网页基础,结构

超文本:超级文本 
标记:<> 
语言:沟通交流(打交道)的工具


双标签:<html></html> <body></body> 
单标签:<meta /> <img />

* HTML不是一门编程语言,而是标记语言,标记语言是由一套标记标签组成的,故HTML是通过标记标签来描述网页的。
(2)、CSS:层叠样式表(Cascading Style Sheets)——修饰、美化网页 (化妆师)
1.#box{
2.    width : 200px;
3.    height : 200px;
4.    border:8px solid red;
5.6.}


(3)、js:脚本语言 (Javascript)(行为)——增加动态交互功能 (魔术师)
1.<div onclick=” this.style.width = ‘100px’; this.style.height = ‘500px’; “></div>

三、HTML结构详解

 <!DOCTYPE html>  <!--文档声明--> <html  lang="en"> <!--HTML 文档主体部分 language="en"语言-英文 浏览器会弹出是否翻译--> <head> <!--头部 必须 写一些网页相关的说明、信息等等,不能用来写展示出来的内容--> <!--字符编码--> <meta charset="UTF-8"> <!--中国常用的编码 UTF-8 GBK GB2312--> <title>01-HTML结构</title> <!--标题 非常重要 关系到SEO--> <meta name="keywords" content=""> <!--因为作弊严重,现在浏览器已经不再检索了--> <meta name="description" content="这是网页的描述"> <!--描述 吸引用户点击--> <meta name="author" content="SeLiNnnn"> <meta name="generator" content="WebStorm"> <!--开发工具,没什么必要说明--> </head> <body> <!--身体 必须 网页展示出来的内容-->   </body> </html> 

四、常用标签

div ——————块 
img ——————图片(单标签) 
a ———————链接、下载、锚点 
h1-h6—————-标题 
p ———————段落 
span —————-区分样式 
ul——————–无序列表 
ol——————–有序列表

li————————-列表项
dl ——————-定义列表

dt ————————-定义列表标题
dd ————————定义列表项
i ———————定义斜体文字 
strong————–强调(粗体) 
em ——————强调(斜体)trong 标签和 em标签一样,用于强调文本,但它强调的程度更强一些。 
br ———-换行 
hr——————定义水平线

有点纠结要不要把什么pre sup标签也写出来…
但似乎意义不大…


六、img图片标签详解

<img src=”文件路径” alt=”图片名”/>

img属性

src -定义图片路径 
width -图片宽度,如果只给了width 没给height,height会自等比例缩放 
height-图片高度,如果只给了height 没给width,width会自等比例缩放 
alt -图片名字 给百度搜索引擎抓取使用(SEO) 
title -标题给用户提示信息(有利于用户体验)




七、a标签
a标签功能: 链接 | 下载 | 锚点链接: href=’url’ 中url是一个网页地址

相对 URL – 指向站点内的某个文件(href=”./index.html”) 
绝对 URL – 指向另一个站点(比如 href=”http://www.baidu.com”)

下载:href=’url’中url链接地址是一个软件就会下载 
锚点:href=’#ID名’ 锚点


target 链接打开方式

  • _blank 新窗口(空白页面)且反复打开
  • _self 当前窗口
  • _new 只打开一个新窗口

<base target=”_blank” /> 定义默认网页打开方式

下载

href的地址指向一个文件,并配合download标签属性,必须要有download属性才可以下载。
[HTML] 纯文本查看 复制代码?

1 <a href="文件链接" download="给定一个默认的文件名">a标签的下载功能</a>


锚点(在当前页面内跳转)

在目标位置添加一个<a>给定id的值,在点击跳转的<a>里,给href的值为#id。

<a href=”#nav”>点我跳转</a>  <!–用来点击的 必须是a标签–>
<a id=”nav”>Hello</a>  <!–要跳转到这里 只要有id就可以–>
<a name=”nav”>World</a>  <!–这是name的写法–>

<!–在html5的规则下,推荐使用id而不是name因为有些标签是没有name属性的–>

<!–当一个页面内有相同名字的id和name,锚点会优先跳转到id,和标签位置无关–>

*点击锚点以后,在浏览器顶部的地址栏会显示锚点值(称为hash值),使用hash值可以直接跳转到锚点位置。




八、路径

相对路径—相对于当前 文档位置出发(推荐使用)        

    自己相对于目标的位置

绝对路径—路径名称不能出现中文      

    完整描述文件位置的路径,浏览器不需要知道其他任何信息就能找到,相当于在淘宝买东西给的一个地址。

  • 本地绝对路径:从盘符出发

    • D:\a\b\c\d\6.jpg

  • 网络绝对路径:从域名出发

    • https://www.baidu.com/img/bd_logo1.png

相对路径详解

I. 从当前目录出发,源文件和引用文件在同一目录里,直接引用文件名。

/路径符号

./当前目录

../返回上一层目录

../../返回上一层的上一层目录


II. 相对路径的六种情况


1。HTML文档和图片在同一目录,直接引用即可。
2。图片在文件夹里面,HTML和文件夹1同一目录。
3。文件夹1里面有文件夹2,图片在文件夹2里面,HTML和文件夹1同一目录。
4。图片和文件夹1同一目录,HTML在文件夹1里面。
5。图片和文件夹1同一目录,文件夹1里面文件夹2,HTML在文件夹2里面。
6。图片在文件夹2里,HTML在文件1里面,文件夹1和文件夹2同一目录。

评论

  1. 见朕奇迹

    哈喽哈喽(=・ω・=)

    5月前
    2020-2-27 13:40:26
    • toomey 博主

      你好你好(⌒▽⌒)

      5月前
      2020-2-27 13:53:51

发送评论 编辑评论


				
上一篇
下一篇