HTML基础学习笔记（1）

HTML学习笔记（1）

1.常用快捷键

win+d---返回桌面
win+e---我的电脑
win+r---打开运行
Alt+tab---切换软件
ctrl+tab---切换软件文档
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

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

HTML结构标准

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

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

HTML标签分类

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

HTML标签关系分类

包含（嵌套关系）---<title></head></li> <li>并列关系---<head></head><body></body></li> </ul> <ol start="5"> <li>开发工具：</li> </ol> <ul> <li> <p>Dw 历史悠久</p> </li> <li> <p>Sublime 轻量级有很多好用的插件</p> </li> <li> <p>Webstorm 重量级太智能</p> </li> <li> <p>Sublime常用快捷键</p> </li> <li> <p>html:xt+tab---html结构代码</p> </li> <li> <p>！+tab --- html5标签结构</p> </li> <li> <p>tab---自动补全</p> </li> <li> <p>ctrl+shift+d---快速复制一行</p> </li> <li> <p>ctrl+shift+k---快速删除一行</p> </li> <li> <p>ctrl+鼠标左键单击---集体输入</p> </li> <li> <p>ctrl+h---查找替换</p> </li> <li> <p>ctrl+f---查找</p> </li> <li> <p>ctrl+/---注释</p> </li> <li> <p>ctrl+k+b---快速打开/隐藏侧边栏（查看选项）</p> </li> <li> <p>ctrl+n---快速创建新文件</p> </li> <li> <p>ctrl+l---快速选中一行</p> </li> <li> <p>ctrl+w---关闭当前页面</p> </li> <li> <p>ctrl+shift+上/下箭头---光标定位行，快速整体移动（上下移动）</p> </li> <li> <p>F11 全屏模式</p> </li> <li> <p>查看-布局---设置页面中显示文档分布</p> </li> <li> <p>其他快捷键</p> <ul> <li>Ctrl+D 选词（反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）</li> <li>Ctrl+G 跳转到相应的行</li> <li>Ctrl+J 合并行（已选择需要合并的多行时）</li> <li>Ctrl+L 选择整行（按住-继续选择下行）</li> <li>Ctrl+M 光标移动至括号内开始或结束的位置</li> <li>Ctrl+T 词互换</li> <li>Ctrl+U 软撤销</li> <li>Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行；</li> <li>Ctrl+R 快速列出/跳转到某个函数</li> <li>Ctrl+K Backspace 从光标处删除至行首</li> <li>Ctrl+K+B 开启/关闭侧边栏</li> <li>Ctrl+KK 从光标处删除至行尾</li> <li>Ctrl+K+T 折叠属性</li> <li>Ctrl+K+U 改为大写</li> <li>Ctrl+K+L 改为小写</li> <li>Ctrl+K+0 展开所有</li> <li>Ctrl+Enter 插入行后（快速换行）</li> <li>Ctrl+Tab 当前窗口中的标签页切换</li> <li>Ctrl+Shift+A 选择光标位置父标签对儿</li> <li>Ctrl+Shift+D 复制光标所在整行，插入在该行之前</li> <li>ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找</li> <li>Ctrl+Shift+K 删除整行</li> <li>Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行</li> <li>Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）</li> <li>Ctrl+Shift+P 打开命令面板</li> <li>Ctrl+Shift+/ 注释已选择内容</li> <li>Ctrl+Shift+↑可以移动此行代码，与上行互换</li> <li>Ctrl+Shift+↓可以移动此行代码，与下行互换</li> <li>Ctrl+Shift+[ 折叠代码</li> <li>Ctrl+Shift+] 展开代码</li> <li>Ctrl+Shift+Enter 光标前插入行</li> <li>Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换</li> <li>Ctrl+Z 撤销</li> <li>Ctrl+Y 恢复撤销</li> <li>Ctrl+F2 设置/取消书签</li> <li>Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）</li> <li>Ctrl+鼠标左键可以同时选择要编辑的多处文本</li> <li>Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择</li> <li>Shift+F2 上一个书签</li> <li>Shift+Tab 去除缩进</li> <li>Alt+Shift+1（非小键盘）窗口分屏，恢复默认1屏</li> <li>Alt+Shift+2 左右分屏-2列</li> <li>Alt+Shift+3 左右分屏-3列</li> <li>Alt+Shift+4 左右分屏-4列</li> <li>Alt+Shift+5 等分4屏</li> <li>Alt+Shift+8 垂直分屏-2屏</li> <li>Alt+Shift+9 垂直分屏-3屏</li> <li>Ctrl+Shift+分屏序号将当前焦点页分配到分屏序号页</li> <li>Alt+. 闭合当前标签</li> <li>Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑</li> <li>Tab 缩进自动完成</li> <li>F2 下一个书签</li> <li>F6 检测语法错误</li> <li>F9 行排序(按a-z)</li> </ul> </li> </ul> <ol start="6"> <li>设置默认浏览器</li> </ol> <ul> <li>Chrome</li> </ul> <h2 id="5标签">5标签</h2> <h3 id="单标签">单标签</h3> <ol> <li>注释标签（ctrl+/）：<code></code></li> <li>换行标签：<code><br /></code></li> <li>水平线标签：<code><hr /></code></li> </ol> <h3 id="双标签">双标签</h3> <ol> <li>段落标签：<code><p></p></code> 特点：上下自动生成空白行。<code><br /></code>换行没有</li> <li>标题标签：<code><h1></h1></code>---一个页面里只能出现一次。h变化范围：h1~h6</li> <li>文本标签：<code><font>文本内容</font></code></li> <li>文本格式化标签：</li> </ol> <ul> <li>文本加粗：<code><strong></strong></code> <code><b></b></code>（少用）</li> <li>文本倾斜：<code><em></em></code> <code><i></i></code>（少用）</li> <li>删除线：<code><del></del></code> <code><s></s></code>（少用）</li> <li>下划线：<code><ins></ins></code> <code><u></u></code>（少用）</li> <li>注：之所以工作里使用<code><strong></strong> <em></em><del></del> <ins></ins></code>，因为更有语义化，可读性更强。</li> <li><code><sup></sup></code> 上标</li> <li><code><sub></sub></code> 下标</li> </ul> <ol start="5"> <li>图片标签：<br> <code><img src="" alt="" title="" width="" height="" /></code><br> src---图片来源必写属性<br> alt---替换文本图片不显示的时候显示的文字<br> title---提示文本鼠标放到图片上显示文字<br> width---图片宽度<br> height---图片高度</li> </ol> <h2 id="6路径">6路径</h2> <ul> <li> <p>相对路径：相对于文件自身出发，就是相对路径。<br> 文件和图片（html文档）在同一个目录（文件夹），直接写文件名<br> 图片（html）在文件的下一级目录，文件夹名称/图片（html）名称<br> 图片（html）在文件的上一级目录，../图片（html）名称<br> 图片（html）在文件的上一级的其他目录，../其他目录名/图片（html）名称<br> 总结：找到下一级目录（文件夹）的图片（文件）用 / ；跳出当前目录使用../</p> </li> <li> <p>绝对路径：电脑上绝对路径，一般不用</p> </li> </ul> <h2 id="7超链接">7超链接</h2> <ul> <li><code><a href="03图片标签.html" title="图片标签" target="_blank">超链接</a></code><br> href 去往的路径（跳转的页面）必写属性<br> title 提示文本<br> target="_self" 默认值---在在自身页面打开（关闭自身页面，打开链接页面）<br> target=”_blank” 打开新页面（自身页面不关闭，打开一个新的链接页面）</li> </ul> <ol> <li>锚链接</li> </ol> <ul> <li>先定义一个锚点:<code><p id="sd"></code></li> <li>超链接到锚点：<code><a href="#sd">回到顶部</a></code></li> </ul> <ol start="2"> <li> <p>空链---不知道链接到那个页面的时候，用空链<br> <code><a href="#">空链</a></code></p> </li> <li> <p>超链接的优化</p> </li> </ol> <ul> <li><code><base target="_blank"></code> --- 让所有的超链接都在新窗口打开</li> </ul> <ol start="4"> <li>压缩文件下载不推荐使用</li> </ol> <ul> <li><code><a href="../01-ppt.rar">压缩包</a></code></li> </ul> <h2 id="8特殊字符标记">8特殊字符标记</h2> <ul> <li>( ) 空格---<code> </code> *</li> <li>< 小于号---<code><</code> *</li> <li> <blockquote> <p>大于号---<code>></code> *</p> </blockquote> </li> <li>& 和号---<code>&</code></li> <li>￥人民币---<code>¥</code></li> <li>© 版权---<code>©</code></li> <li>® 注册商标---<code>®</code></li> <li>° 摄氏度---<code>°</code></li> <li>± 正负号---<code>±</code></li> <li>× 乘号---<code>×</code></li> <li>÷ 除号---<code>÷</code></li> <li>² 平方2(上标2)---<code>²</code></li> <li>³ 立方3(上标3)---<code>³</code></li> </ul> <h2 id="9列表">9列表</h2> <ol> <li>无序列表</li> </ol> <ul> <li><code><ul><li></li><li></li>……<li></li></ul></code> 默认为实心小圆圈</li> <li><code><ul type="square"><li>今天是星期三</li></ul></code> 小方块</li> <li><code><ul type="disc"><li>今天是星期三</li></ul></code> 实心小圆圈</li> <li><code><ul type="circle"><li>今天是星期三</li></ul></code> 空心小圆圈</li> </ul> <ol start="2"> <li>有序列表</li> </ol> <ul> <li><code><ol type=""><li></li><li></li>……<li></li></ol></code></li> <li><code>type="1,a,A,i,I"</code> 序号类型</li> <li><code>start="3,c,……"</code> 决定了开始的位置</li> </ul> <ol start="3"> <li>自定义列表</li> </ol> <pre><code><dl> <dt></dt> 小标题 <dd></dd> 解释标题 <dd></dd> 解释标题 </dl> </code></pre> <h2 id="10音乐标签">10音乐标签</h2> <ul> <li><code><embed src="1.mp3" hidden="true" /></code> <ul> <li>src---音乐文件来源</li> <li>hidden="true"/"false"---隐藏显示播放符号</li> </ul> </li> </ul> <h2 id="11滚动">11滚动</h2> <ul> <li>页面自动滚动效果之：<code><marquee>...</marquee></code></li> <li>中间的内容可以为文字，图片，也可以是由程序生成的文字或图片</li> <li>属性：height 设置高度 width 设置宽度 bgcolor 设置背景颜色</li> <li>behavior：设定滚动的方式 <ul> <li>slide--表示一端滚动到另一端，不会重复。</li> <li>scroll：表示由一端滚动到另一端，会重复。</li> <li>alternate：表示在两端之间来回滚动。</li> </ul> </li> <li>direction：设置滚动的方向 <ul> <li>down :向下滚动</li> <li>left:向左滚动</li> <li>right:向右滚动</li> <li>up:向上滚动</li> </ul> </li> <li>loop：设置滚动次数，-1：一直滚下去</li> </ul>

posted on 2018-03-16 19:58 luoyu113 阅读(105) 评论(0) 编辑收藏举报