01html基础
01_html
1 Mac中的快捷键
基础快捷键：
command+c 复制
command+v 粘贴
command+m 最小化当前窗口
Shift+command+c 桌面环境打开Finder
command+space 输入法切换
fn+F3 快速显示桌面
command+tab 切换应用程序
command+shift+N 在打开Finder后快速建立文件夹
command+shift+{ }切换浏览器标签
command+w 快速关闭浏览器的一个标签页
command+T 浏览器中快速新建一个标签页
command+L 浏览器中快速定位到地址栏
command+M 最小化当前程序
control+command+F 最大化当前窗口（恢复窗口)
2 认识网页
网页主要是由文字、图片、按钮等元素构成。当然，除了这些元素外，还包含有音频、视频和Flash等。
Web三大标准：
- 结构标准
- 表现标准
- 行为标准
常用的浏览器：
- IE
- FireFox
- Chrome
- Opera
- Safari
3 HTML简介
3.1 HTML定义
HTML中文翻译为超文本标记语言(Hyper Text Markup Language),主要是通过HTML标记对网页中的文本、图片、声音等进行描述。
3.2 HTML结构
一个基本的HTML文档如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML结构</title>
</head>
<body>
欢迎学习HTML！
</body>
</html>
3.3 HTML标签关系
- 嵌套关系
- 并列关系
HTML标签分为双标签和单标签
3.4 HTML开发工具Sublime
常用快捷键：
Command + T：查询/前往文件
Command + R：查询/前往funcdtion或method
Command + K + B: 隐藏/显示边栏
Command + L：选择当前光标整行
Command + D：选择当前光标所在的一个词 （继续按会继续选取下一个同样的词）
Ctrl + Shift + K: 删除当前行
Command + K + U: 转换为大写
Command + K + L: 转换为小写
Comamand+ Shift + V: 粘贴并缩进
Command + F：查找
Command + Shift + F：查找替换
Command + /: 注释/非注释
Ctrl + M：前往匹配的括号
4、常用标签
4.1 文档段落
4.1.1 DOCTYPE文档声明
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE >放在文档的第一行，这不是一个标签，是用来声明html的类型。
4.1.2 网页编码设置
在网页显示乱码是，在head标签之间添加：
<meta http-equiv="Content-Type" contect="text/html" charset="UTF-8">
4.1.3 文字和段落标签
标题标签：<h1></h1>~<h6></h6>
段落标签: <p> </p>
align对齐属性值
换行标签:<br />
水平线：<hr />
属性如下：
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一首诗</title>
</head>
<body>
<h1 align="center">《早发白帝城》</h1>
<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>
文字斜体:<i></i> 、 <em></em>
加粗：<b></b> 、 <strong></strong>
下标：<sub>
上标：<sup>
插入内容：<ins>
删除内容：<del>
特殊符号：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊符号</title>
</head>
<body>
<p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈
</p>
<p align="center">Copyright ©2016 yubindeng.me All Rights Reserved</p>
</body>
</html>
效果图：
4.2 列表标签
无序列表：
<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul>
type属性值：
有序列表：
<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol>
type属性值：
定义列表：
定义列表：
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
……
</dl>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h2>什么是 HTML？</h2>
<p>HTML 是用来描述网页的一种语言。</p>
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ol>
<hr />
<dl>
<dt>什么是HTML</dt>
<dd>HTML是用来描述网页的一种语言。</dd>
<dd>HTML超文本标记(Hyper Text Markup Language)。</dd>
<dt>HTML标签</dt>
<dd>HTML标记标签通常被称为HTML 标签</dd>
<dt>HTML元素</dt>
<hr />
</body>
</html>
列表在实际中的应用场景，可以再谷歌浏览器下通过F12打开开发者工具看京东、搜狐等网页的设计。
4.3 图像和超链接标签
图片标签语法：
<img src=“” alt=“” title="" …/>
注意相对路径和绝对路径
img属性：
超链接标签语法：
< a href=“”>内容</a>
属性：
定义锚（同一页面):
< a href=“#锚名1”>目录1 </a>
< a href=“#锚名2”>目录2 </a>
< a href=“…”name=“锚名1”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx
< a href=“…”name=“锚名2”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx
定义锚（不同页面）：
< a href=“网页名称#锚名”>……</a>
电子邮件链接：
<a href=“mailto:邮件地址”>……</a>
文件下载链接:
<a href="文件地址"> ... </a>
01html基础的更多相关文章
- 集腋成裘-01-html -html基础
1 标签 1.1 单标签 注释标签 <!-- 注释标签 --> 换行标签 <br/> 水平线 <hr/> <img src="图片来源" ...
- 新知识：JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- 李洪强和你一起学习前端之(1)Html基础
1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...
- html 基础二
HTMLCSS基础2 一.HTML中的标签 1.1标签的特点 给文本加上含有语义的标签 应该学习更多具体语义标签 标签:用“<>”包起来的内容 2.1 更多的标签 2.1.1 h系列的标签 ...
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
随机推荐
- Koa1 框架
安装创建项目: 1.一定要全局安装(koa1.2和koa2都己经支持) npm install koa-generator -g 2.koa1 生成一个test项目,切到test目录并下载依赖 koa ...
- 数据访问层DAL
我们已经根据设计好的pdm文件生成数据库,下面我们一起完成数据库访问层需要的工作 在dal类库上点击右键,添加,新建项 选择“ADO.NET实体数据模型”,会自动命名“Model1” 选择“来自数据库 ...
- 网易 UI 自动化工具 Airtest 浅用记录
一 使用目的 该工具主要是面向游戏UI测试基于图像识别,如游戏框架unity,Cocos-js以及网易内部的游戏框架 同时也支持原生Android App 的基于元素识别的UI自动化测试. 本文主要使 ...
- 洛谷P1092 虫食算
P1092 虫食算 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: http://paste.ubuntu.com/2544 ...
- Problem C: [noip2016十连测第五场]travel (构造+贪心)
题面 https://www.lydsy.com/JudgeOnline/upload/201610/statements(1).pdf 题解 好神仙的贪心-- 首先无解的情况很容易判断,就是\(l= ...
- （四）从输入URL到页面加载发生了什么
一.从输入URL到页面加载发生了什么 1.在浏览器中输入URL 如:https://www.cnblogs.com/loveapple/ URL分成协议.地址.路径三部分 协议:http.https. ...
- 外企面试，哪有你想象的那么难!（已收埃森哲、NTTDATA等8家外企offer）
无精疯,一名背包客,大学期间穷游了十余个国家,五十余座城市,也是一位拥有健身教练证的业余健身痴迷者.从大二开始自学Java并开始了第一份实习,后面也是通过自学转到了大数据,之前在一家大数据独角兽实习, ...
- Objective-C的Runtime System
[0] Outline -- [1] 版本和平台 -- [2] 与Runtime System交互 -- [3] 方法的动态决议 -- [4] 消息转发 -- [5] 类型编码 -- [6 ...
- NYOJ542-试制品
题目链接:点击打开链接 试 制 品 时间限制:1000 ms | 内存限制:65535 KB 难度: 描述 ZZ大学的Dr.Kong最近发现实验室的很多试制品都已经用完.由于项目经费有限,为了节省 ...
- 《SQL 进阶教程》 自连接分组排序:练习题1-2-2
分组排序 SELECT d1.district, d1. NAME, (SELECT COUNT(d2.price) FROM district_products d2 WHERE d2.price ...