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 -- 引进了匿名方法,在 ...
随机推荐
- 使用PM2管理nodejs进程分享
摘要:pm2 是一个带有负载均衡功能的Node应用的进程管理器.本文主要介绍了详解使用PM2管理nodejs进程,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助 ...
- R语言 arules包 apriori()函数中文帮助文档(中英文对照)
apriori(arules) apriori()所属R语言包:arules Mining Associations w ...
- 剑指offer(65):获取数据流中的中位数
参考 https://blog.csdn.net/u011080472/article/details/51291089 题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位 ...
- Linus与陈庆
Linus 1969年末,李纳斯出生于芬兰的赫尔辛基市,算是赶上了60后的尾巴.小时候他是个其貌不扬的孩子,除了一个鼻子长的「富丽堂皇」之外乏善可陈.他为了让鼻子看上去小一些,经常戴上眼镜就不愿意摘下 ...
- C习题练习
#define _CRT_SECURE_NO_WARNINGS#include <stdio.h> //比较俩个数的大小 //int max(int a, int b) {// int t ...
- nessus安装及使用
1.安装注册 (1)从https://www.tenable.com/products/nessus/select-your-operating-system上下载对应操作系统版本的nessus,结果 ...
- All Roads Lead to Rome(30)(MAP【int,string】,邻接表,DFS,模拟,SPFA)(PAT甲级)
#include<bits/stdc++.h>using namespace std;map<string,int>city;map<int,string>rcit ...
- AIM Tech Round 5 (rated, Div. 1 + Div. 2) D(SET,思维)
#include<bits/stdc++.h>using namespace std;const long long mod = 1e9+7;char s[370007][27];long ...
- java 提取(解压)rar文件中特定后缀的文件并保存到指定目录
内容简介 本文主要介绍使用junrar来提取rar压缩文件中特定后缀(如:png,jpg)的文件并保存到指定目录下. 支持v4及以下版本压缩文件,不支持v5及以上. 在rar文件上右键,查看属性,在压 ...
- 《OD大数据实战》Spark入门实例
一.环境搭建 1. 编译spark 1.3.0 1)安装apache-maven-3.0.5 2)下载并解压 spark-1.3.0.tgz 3)修改make-distribution.sh VER ...