HTML基础
Hyper text markup language 超文本标记语言
- 超文本:网页中可以包含图片、文字、视频、音频、文本框等元素;
- 标记(标签):在网页中给网页元素做标记(右键,查看网页源代码)
- 超链接: 实现网页之间的跳转,
Sublime常用快捷键
Windows+D
返回桌面Windows+R
运行dosWindows+E
打开我的电脑Alt+Tab
切换软件Ctrl+Tab
软件内部文档和文档之间之间切换F2
重命名
Web标准:
- 结构标准:
HTML
HyperText Mark Language 超文本标记语言 - 表现标准:
CSS
Casading Style Sheets 层次样式表 - 行为标准:
javaScript
- ECMAScript javaScript标准
DOM
Document Object Model 文档对象模型BOM
Browser Object Mode 浏览器对象模型
浏览器简介
浏览器涉及技术:浏览器内核,渲染引擎 SEO
, Search Engine Optimization(搜索引擎优化)。
浏览器内核:分为两部分:渲染引擎和JS引擎,决定了浏览器如何显示网页的内容、页面格式等
- ie
trident
- firefox
gecko
- chrome/safari
webkit
- chrome
blink
- opera
persto
浏览器和服务器的那点事
- http协议:超文本传输协议、浏览器和服务器之间的对话(通信的协议)。
- https 加密的过程
- url协议:规定url地址的格式
- 协议规定格式:scheme:定义因特网服务类型
- host:定义域主机 端口:网页默认80端口
- path:路径
- filename:文件名
HTML 结构
|
|
注:文档的后缀名只能决定打开方式,不能修改文档类型
HTML 标签的分类
- 单标签
<! Doctype html>
<img src="" alt=""/>
- 双标签
<html></html>
<head></head>
<title></title>
<body></body>
- …
HTML 关系
- 并列关系(同级)
<head></head>
和<body></body>
- 包含关系(嵌套)
<head><title>title</title></head>
开发工具
DreamWeaver
:很老的一个软件 偏设计师使用sublime
: 轻量级的软件,有很多好用的插件WebStorm
:重量级软件,功能强大;
Sublime 常用的快捷键
html:xt+tab
html结构html:5 + tab
html结构Ctrl+Shft+D
快速复制Ctrl+Shft+K
快速删除一行Ctrl+Shift+↑/↓
快速上下移动一行Tab
补全标签Ctrl+鼠标左键
选中多行Ctrl+L
选中一行Ctrl+H
替换别的标签Alt+Shift+2
查看布局Alt+V
显示隐藏菜单栏ctrl+shift+p
+move
指令 移动文件
HTML标签
单标签
|
|
双标签
- 段落标签:
<p></p>
- 文本标签:
<font></font>
- 标题标签:
|
|
标题系列取值只能取到h6
- 文本格式化标签
- 加粗
<strong></strong>
,<b></b>
常用strong - 倾斜
<em></em>
,<i></i>
常用em - 删除线标签
<del></del>
,<s></s>
常用del - 插入文本:
<ins></ins>
,<u></u>
常用ins - 上下标标签:
<sup></sup>
,<sub></sub>
- 加粗
注意:使用strong em del ins 更有意义
图片标签 <img src="Legolas.jpg" alt="我的男神" title="legolas" width="500" />
仅指定宽或高时,等比例缩放。
src
图片来源(路径),alt
替换文本.title
提示文本(鼠标放到图片上显示的文字;width
图片显示的宽度height
图片显示的高度
相对路径和绝对路径(相对路径的可移植性好)
- 相对路径:
- 文档(html/图片)在同一个文件夹,直接写图片(文档)名字
<img src="Legolas.jpg" alt="legolas" height="300" />
- 文档不在同一个文件夹,在上级文件中
<img src="../1.jpg" alt="legolas" height="300" />
- 文档不在同一个文件夹,在上两级文件中
<img src="../../Hydrangeas.jpg" alt="菊花" height="300" />
- 文档不在同一个文件夹,在下级文件中
<img src="pic/Koala.jpg" alt="考拉" height="300" />
- 文档不在同一个文件夹,在下两级文件中
<img src="pic/photo/Penguins.jpg" alt="企鹅" height="300" />
- 文档(html/图片)在同一个文件夹,直接写图片(文档)名字
- 绝对路径:
- 本地电脑绝对路径
<img src="F:\pic\photo" alt="企鹅" />
- 互联网上的绝对路径: 网页中的图片来自服务器端传输过来的。
- 本地电脑绝对路径
超链接标签
超链接:<a href="06_test" target="_blank" title="气温高">气温案例</a>
href
去往的路径(连接的文档),必写属性。target=” _self”
关闭自身串口,打开新窗口target=”_blank”
自身窗口不关闭,打开新窗口title
提示文本,是非必须的ctrl+shift+s:
另存为 把文件复制并另存为
超链接优化: <base target=”_blank”>
- 锚点:
- 第一步:给标签加id
- 第二部:herf写上#+id名
<a href="#xd">回到顶部</a>
- 压缩包:
<a href="压缩包.rar">压缩文件下载</a>
- 空连接:
<a href="#">此处有连接</a>
- 空连接:
特殊字符:段落标签的写法
列表标签
- 无序列表
<ul type="square"></ul>
- square 实心方块
- dick 默认实心小圆圈
- circle 空心小圆圈
注意:ul标签里面只能放li标签,li里面可以放任何标签
- 有序列表
|
|
type 的取值可以是1,a,A,i,I
start 是开始的序号
- 自定义列表
|
|
其他标签
- 音乐标签 embed 背景音乐
<embed src="BIGBANG - BAD BOY (Live).mp3" hidden="false" />
- hidden = “ture” 影藏,默认是false,播放器
- 滚动标签
<marquee behavior="scroll" direction="right" width="500px" height="100px" bgcolor="blue">我来也</marquee>