【HTML+CSS】萌新学习前端的笔记一份~
本帖最后由 SeLiNnnn 于 2018-5-5 10:37 编辑开帖啦终于开帖啦...其他的话就不多说啦，希望自己坚持下去就好。
关于IDE用的是Webstorm2017.1电脑卡到爆炸的时候会用Sublime Text3考虑到也许有萌新和我一样在学习前端就顺便把IDE链接发出来方便有需要的胖友们下载啦。
啊尴尬，找不到webstorm的链接了要真的需要我再传吧..下面这个是Sublime的安装包 Mac Windows都有链接：https://pan.baidu.com/s/1Gf22TWSXmurXilnSq6eUug 密码：pnhq以及sublime的使用教程 里面有视频和教程笔记链接：https://pan.baidu.com/s/1AgzasgtS0kDhj9DvC4WmIw 密码：ve1e如果还有需要Editplus的我也可以提供...
关于浏览器Chrome FireFox IE11都有不过..鉴于我现在没有能力考虑浏览器兼容问题就先放着吧。
关于学习笔记其实Word 有道云都可以记我现在用的是Typora以下是Typora的基本使用教程 只有一个视频链接：https://pan.baidu.com/s/1FxKR9iZ13BemB2cWp3in2g 密码：dovf软件应该很好下 主要我云盘也没有嘿嘿。下面开始正文咯~
https://static.52pojie.cn/static/image/hrline/5.gif
一、 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><!--文档声明-->
<htmllang="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属性才可以下载。
<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同一目录。
Over今天就先写到这里。
这两天总是对着电脑一坐就很久肩颈很不舒服啦。
笔记里可能存在有误的地方麻烦大家指正哟~ SeLiNnnn 发表于 2018-5-5 10:34
是的....我看到啦...
和我编辑的时候不一样心塞
可以试试markdown。也可以自己建一个blog，自己编写静态网页放上去，也是对学的内容的一种应用训练。等到最后看到自己的blog随着学习进度变得更漂亮更丰富应该还是挺有成就感的。 加油。排版有点小乱。 闲月疏云 发表于 2018-5-5 10:33
加油。排版有点小乱。
是的....我看到啦...
和我编辑的时候不一样心塞 感谢分享！！！！！！！ 看了下，总结得可以 看了下，总结得可以 在努力一下你就更厉害了 对我等新手帮助很大，谢谢楼主分享学习心得！
页:
[1]
2