HTML基础学习笔记（1）

时间 2019-11-21

标签 html 基础学习笔记栏目 HTML 繁體版

原文原文链接

HTML学习笔记（1）

1.经常使用快捷键

win+d---返回桌面
win+e---个人电脑
win+r---打开运行css
Alt+tab---切换软件
ctrl+tab---切换软件文档html
F2---重命名
F5---刷新前端

2.认识前端

前端就是将效果图生成网页，利用HTML+CSS+JS
PC端移动端
用户体验

2认识网页

网页由文字、图片、输入框、视频、音频、超连接等组成；
web标准：W3c组织（万维网联盟）制定

html 结构标准---人的身体
CSS 表现标准---给人化妆、变得更漂亮
Js 行为标准---至关于人在唱歌

基础班课程

html 2天
css 7天
js 3天

浏览器

浏览器是一个上网的客户端（软件）。
IE、火狐、goole、猎豹、Safari浏览器、Opera

浏览器内核

渲染引擎
IE(trident) 谷歌/欧鹏(blink) 火狐(gecko) 苹果(webkit)
渲染引擎是兼容性我呢提出现的根本缘由

浏览器和服务器

IIS web服务器提供网页浏览服务

URL地址

浏览器向服务器发送请求（经过http协议）
http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
url协议:平时咱们写的网址就是url地址
url协议：规定url地址的格式
协议规定格式： scheme://host.domain:port/path/filename
scheme: 定义因特网服务的类型。常见的就是http
host：定义域主机（http 的默认主机是www）
domain: 定义因特网域名好比：w3school.com.cn
:port 定义端口号（网页默认端口 :80）
path: 网页所在服务器上的路径
filename: 文件名称

4认识HTML

Hyper text markup language

超文本标记语言html5
超文本：超连接。（实现页面跳转）web

HTML结构标准浏览器

<!doctype html>    声明文档类型
 <html>             根标签
 <head>             头标签：用户只能看见标题
 <title></title>    标题标签
 </head>
 <body>             主体标签            
 </body>
 </html>

注：html与htm是同样的。后缀名不能决定文件格式，只能决定打开文件的方式。

HTML标签分类

单标签： <!doctype html>
双标签：

HTML标签关系分类

包含（嵌套关系）---</head></li>
并列关系---

开发工具：

Dw 历史悠久
Sublime 轻量级有不少好用的插件
Webstorm 重量级太智能服务器
Sublime经常使用快捷键dom
html:xt+tab---html结构代码
！+tab --- html5标签结构
tab---自动补全
ctrl+shift+d---快速复制一行
ctrl+shift+k---快速删除一行
ctrl+鼠标左键单击---集体输入
ctrl+h---查找替换
ctrl+f---查找
ctrl+/---注释
ctrl+k+b---快速打开/隐藏侧边栏（查看选项）
ctrl+n---快速建立新文件
ctrl+l---快速选中一行
ctrl+w---关闭当前页面
ctrl+shift+上/下箭头---光标定位行，快速总体移动（上下移动）
F11 全屏模式
查看-布局---设置页面中显示文档分布编辑器
其余快捷键
- Ctrl+D 选词（反复按快捷键，便可继续向下同时选中下一个相同的文本进行同时编辑）
- Ctrl+G 跳转到相应的行
- Ctrl+J 合并行（已选择须要合并的多行时）
- Ctrl+L 选择整行（按住-继续选择下行）
- Ctrl+M 光标移动至括号内开始或结束的位置
- Ctrl+T 词互换
- Ctrl+U 软撤销
- Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行；
- Ctrl+R 快速列出/跳转到某个函数
- Ctrl+K Backspace 从光标处删除至行首
- Ctrl+K+B 开启/关闭侧边栏
- Ctrl+KK 从光标处删除至行尾
- Ctrl+K+T 折叠属性
- Ctrl+K+U 改成大写
- Ctrl+K+L 改成小写
- Ctrl+K+0 展开全部
- Ctrl+Enter 插入行后（快速换行）
- Ctrl+Tab 当前窗口中的标签页切换
- Ctrl+Shift+A 选择光标位置父标签对儿
- Ctrl+Shift+D 复制光标所在整行，插入在该行以前
- ctrl+shift+F 在文件夹内查找，与普通编辑器不一样的地方是sublime容许添加多个文件夹进行查找
- Ctrl+Shift+K 删除整行
- Ctrl+Shift+L 鼠标选中多行（按下快捷键），便可同时编辑这些行
- Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
- Ctrl+Shift+P 打开命令面板
- Ctrl+Shift+/ 注释已选择内容
- Ctrl+Shift+↑能够移动此行代码，与上行互换
- Ctrl+Shift+↓能够移动此行代码，与下行互换
- Ctrl+Shift+[ 折叠代码
- Ctrl+Shift+] 展开代码
- Ctrl+Shift+Enter 光标前插入行
- Ctrl+PageDown 、Ctrl+PageUp 文件按开启的先后顺序切换
- Ctrl+Z 撤销
- Ctrl+Y 恢复撤销
- Ctrl+F2 设置/取消书签
- Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
- Ctrl+鼠标左键能够同时选择要编辑的多处文本
- Shift+鼠标右键（或使用鼠标中键）能够用鼠标进行竖向多行选择
- Shift+F2 上一个书签
- Shift+Tab 去除缩进
- Alt+Shift+1（非小键盘）窗口分屏，恢复默认1屏
- Alt+Shift+2 左右分屏-2列
- Alt+Shift+3 左右分屏-3列
- Alt+Shift+4 左右分屏-4列
- Alt+Shift+5 等分4屏
- Alt+Shift+8 垂直分屏-2屏
- Alt+Shift+9 垂直分屏-3屏
- Ctrl+Shift+分屏序号将当前焦点页分配到分屏序号页
- Alt+. 闭合当前标签
- Alt+F3 选中文本按下快捷键，便可一次性选择所有的相同文本进行同时编辑
- Tab 缩进自动完成
- F2 下一个书签
- F6 检测语法错误
- F9 行排序(按a-z)

设置默认浏览器

Chrome

5标签

单标签

注释标签（ctrl+/）：
换行标签： 
水平线标签：<hr />

双标签

段落标签： 特色：上下自动生成空白行。 换行没有
标题标签：<h1></h1>---一个页面里只能出现一次。h变化范围：h1~h6
文本标签：文本内容
文本格式化标签：

文本加粗： （少用）
文本倾斜： （少用）
删除线：<del></del> <s></s>（少用）
下划线：<ins></ins> （少用）
注：之因此工做里使用 <del></del> <ins></ins>，由于更有语义化，可读性更强。
 上标
 下标

图片标签：
<img src="" alt="" title="" width="" height="" />
src---图片来源必写属性
alt---替换文本图片不显示的时候显示的文字
title---提示文本鼠标放到图片上显示文字
width---图片宽度
height---图片高度

6路径

相对路径：相对于文件自身出发，就是相对路径。
文件和图片（html文档）在同一个目录（文件夹），直接写文件名
图片（html）在文件的下一级目录，文件夹名称/图片（html）名称
图片（html）在文件的上一级目录，../图片（html）名称
图片（html）在文件的上一级的其余目录，../其余目录名/图片（html）名称
总结：找到下一级目录（文件夹）的图片（文件）用 / ；跳出当前目录使用../ide
绝对路径：电脑上绝对路径，通常不用

7超连接

<a href="03图片标签.html" title="图片标签" target="_blank">超连接</a>
href 去往的路径（跳转的页面）必写属性
title 提示文本
target="_self" 默认值---在在自身页面打开（关闭自身页面，打开连接页面）
target=”_blank” 打开新页面（自身页面不关闭，打开一个新的连接页面）

锚连接

先定义一个锚点:
超连接到锚点：<a href="#sd">回到顶部</a>

空链---不知道连接到那个页面的时候，用空链
<a href="#">空链</a>
超连接的优化

<base target="_blank"> --- 让全部的超连接都在新窗口打开

压缩文件下载不推荐使用

<a href="../01-ppt.rar">压缩包</a>

8特殊字符标记

( ) 空格---  *
< 小于号---< *
大于号---> *
& 和号---&
￥人民币---¥
© 版权---©
® 注册商标---®
° 摄氏度---°
± 正负号---±
× 乘号---×
÷ 除号---÷
² 平方2(上标2)---²
³ 立方3(上标3)---³

9列表

无序列表

<ul><li></li><li></li>……<li></li></ul> 默认为实心小圆圈
<ul type="square"><li>今天是星期三</li></ul> 小方块
<ul type="disc"><li>今天是星期三</li></ul> 实心小圆圈
<ul type="circle"><li>今天是星期三</li></ul> 空心小圆圈

有序列表

<ol type=""><li></li><li></li>……<li></li></ol>
type="1,a,A,i,I" 序号类型
start="3,c,……" 决定了开始的位置

自定义列表

<dl>
    <dt></dt>   小标题
    <dd></dd>   解释标题
    <dd></dd>   解释标题
</dl>

10音乐标签

<embed src="1.mp3" hidden="true" />
- src---音乐文件来源
- hidden="true"/"false"---隐藏显示播放符号

11滚动

页面自动滚动效果之：<marquee>...</marquee>
中间的内容能够为文字，图片，也能够是由程序生成的文字或图片
属性：height 设置高度 width 设置宽度 bgcolor 设置背景颜色
behavior：设定滚动的方式
- slide--表示一端滚动到另外一端，不会重复。
- scroll：表示由一端滚动到另外一端，会重复。
- alternate：表示在两端之间来回滚动。
direction：设置滚动的方向
- down :向下滚动
- left:向左滚动
- right:向右滚动
- up:向上滚动
loop：设置滚动次数，-1：一直滚下去