1-html基础
2017-04-27 本文已影响54人
繁华落尽2018
- 常用快捷键
- windows + d 返回桌面
- windows + e 我的电脑
- windows + r 打开运行
- alt + table 切换软件
- ctrl+tab 文档之间切换
- F2 重命名
- F5 刷新页面
- 认识大前端
- 前端就是将效果图生成网页，利用html+css+js
- 目前pc端，移动端成为热门带动前端
- 解决用户体验，前端可以做很好的用户体验
- 认识网页
- 网页由文字，图片，输入框，视频，音频，超链接等组成
- web标准
- w3c组织 （万维网联盟）
- html 结构标准 相当于人的身体 2d
- css 样式标准 相当于给人化妆 变得更漂亮 7d
- js 行为标准 相当于人在唱歌 页面变得灵动 3d
- 浏览器
- 浏览器是上网客户端（软件）。ie，火狐，谷歌，safari，opera
- 浏览器内核
- 渲染引擎 渲染引擎决定了浏览器如何显示网页的内容，以及页面的格式信息，渲染引擎不同，导致兼容性问题
- 浏览器和服务器那点事
- IIS web服务器（软件） 提供网页浏览服务
- 网址 URL 地址
- 浏览器向服务器发送请求（通过http协议）
- http协议： 超文本传输协议，也就是浏览器和服务器端的页面传输数据的约束和规范
- url协议：平时我们写的网址就是url地址
- 协议规定格式：
-
scheme://host.domain:port/path/fimename
- scheme: 定义因特网服务的烈性。常见的就是http
- host: 定义域主机（http的默认主机是www）
- domain: 定义因特网域名 比如：w3school.com.cn
- :port :定义端口号（网页默认端口：80）
- path：网页所在服务器上的路径
- filename：文件名称
-
scheme://host.domain:port/path/fimename
- 认识html
- hyper text markup language 超文本标记语言,标准通用标记语言下的一个应用
- 超文本：就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
- 超文本标记语言的结构包括“头”部分和“主体”部分，其中head部分提供关于网页的信息，body部分提供网页的具体内容
- Html 结构标准
<!doctype html> 声明文档类型 <html> 根标签 <head> 头标签 <title></title> 标题标签 </head> <body> 主体标签 </body> - hyper text markup language 超文本标记语言,标准通用标记语言下的一个应用
</html>
后缀名不能决定文件的格式，只能决定打开的方式
* html标签分类
* 单标签 <! doctype html>
* 双标签 <heml></html> <head></head> <body></body>
* html标签关系分类
* 包含(嵌套关系) <head><title></title></head> 父子
* 并列 <head></head><body></body> 兄弟姐妹
* 开发工具
* sublime 轻量级 有很多好用的额插件
* html:xt+tab html结构性代码
* tab 补全标签代码
* ctrl+shift+d 快速复制一行
* ctrl+shift+k 快速删除一行
* ctrl+鼠标单击 集体输入
* ctrl+h 查找和替换
* ctrl+f 查找
* ctrl+/ 注释
* ctrl+l 快速选中一行
* ctrl+shift+上下箭头 快速上移下移
* f11 全屏
* Alt+shift+123 编辑区域显示123列
*
* webstorm 重量级 很智能
* 标签
* 单便签
* 注释标签 （ctrl+/）
* 换行标签 <br/>(斜杠有没有都行)
* 水平线标签 <hr/>
* 双标签
* < p>< /p> 段落标签 特点：上下自动生成空白行 < br>换行不会生成空白行
* <h1~6></h1~6> 标题标签 h1在一个页面里只能出现一次。
* <font size=“6” Color=“red”>文本内容</font> 文本标签
* < strong >鱼缸</ strong > < b>< b/> 字体加粗
* < em></ em> < i> < /i> 文本倾斜
* < del></ del> <s></s> 删除线
* < ins></ins> < u>ss< /u> 下划线ss标签
注意：之所以工作中使用< strong>< /strong> < em>< /em> < del> < /del> < ins>< /ins> 是因为更有语意化
* `<img str="lzl.jpg" alt="林志玲" title="林志玲" width=“300” height=“300”/>`
* alt：图片不显示的时替代文本，对于残疾人，alt属性是他们了解图片的唯一方式
* str: 图片的来源 必写属性
* title：鼠标在图片上时显示的文本
* width：设置图片的宽度 如果只设置宽度等比例缩放
* height：设置图片的高度 只设置高度等比例缩放
* 路径
* 相对路径
* 文件和图片在同一个文件夹，直接写文件名即可，如果
* 文件和图片再下一级目录里，文件夹名称+/+图片名称
* 文件和图片在上一级，../+图片名称
* 图片在文件的上一级的其它目录中， ../其它目录/图片名称
* 绝对路径
* 超链接
* `<a href="" title="标题" target="_blank"></a>`
* href：需要调整的页面 必写属性
* title： 鼠标经过显示的文字 一般不写
* target: _blank _self
* _self为默认值,关闭自身页面，打开连接页面
* _blank 自身页面不关闭，打开新页面
* href="#" 空连接，还会链接到自己本身
* <a href="压缩包路径.rar">压缩包</a> 压缩文件下载
* <head><base target="_blank"></head> 超链接优化写法 让当前页面所有的超链接都在新窗口打开
* 锚连接
* 先定义一个锚点 `<p id="#sd">`
* 超链接到锚点 `< a href=@"#sd"></a>`
* 特殊符号
* 列表
* 无序列表
```
<ui type=“square|disk|circle”>
<li></li>
<li></li>
</ui>
```
tpye="square" 小方块
type=“disc‘ 实心小圆圈
type=”sircel“ 空心小圆圈
* 有序列表
```
<ol tpye="a|A|i" start=”“>
<li></li>
<li></li>
</ol>
```
type="a,1,A,I,i" type的值可以为 a,1,A,I,i start决定了开始的数字
* 自定义列表
```
<dl>
<dt></dt>
<dd></dd>
</dl>
```
* 音乐标签
`<embed src="文件路径" hidden=”true“>`
* 滚动
