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">关于我们&nbsp;|&nbsp;招聘信息&nbsp;|&nbsp;联系我们&nbsp;|&nbsp;意见反馈

</p>

<p align="center">Copyright&nbsp;&copy;2016&nbsp;yubindeng.me&nbsp;All&nbsp;Rights&nbsp;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基础的更多相关文章

  1. 集腋成裘-01-html -html基础

    1 标签 1.1 单标签 注释标签 <!-- 注释标签 --> 换行标签 <br/> 水平线 <hr/> <img src="图片来源" ...

  2. 新知识：JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  3. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  4. html 基础二

    HTMLCSS基础2 一.HTML中的标签 1.1标签的特点 给文本加上含有语义的标签 应该学习更多具体语义标签 标签:用“<>”包起来的内容 2.1 更多的标签 2.1.1 h系列的标签 ...

  5. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  6. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  7. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  9. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

随机推荐

  1. SpringMVC RESTful中文乱码

    开发中常遇到各种中文乱码很少心烦,这里总结了各种中文乱码https://www.cnblogs.com/lwx521/p/9856186.html 下面以SpringMVC遇到的中文乱码为例详解 首先 ...

  2. mahout过滤推荐结果 Recommender.recommend(long userID, int howMany, IDRescorer rescorer)

    Recommender.recommend(uid, RECOMMENDER_NUM, rescorer); Recommender.recommend(long userID, int howMan ...

  3. Linux/Unix 指令使用说明的格式介绍（the Bash Command 'Usage' Syntax）

    Linux/Unix 指令使用说明的格式介绍(the Bash Command 'Usage' Syntax) 摘自    金马的Blog 原文  http://www.lijinma.com/blo ...

  4. p1197&bzoj1015 星球大战

    传送门(洛谷) 传送门(bzoj) 题目 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的 ...

  5. 阶段3-团队合作\项目-网络安全传输系统\sprint2-线程池技术优化

    之前问题的存在,之前只是用一个客户端在与服务器进行连接,当多个客户端进行连接的时候会连接不上处于等待状态,说明以前我们的服务器只能同时处理一个请求,故需要修改 服务器: 单发:初始化--等待客户端连接 ...

  6. hibernate查询的方式和变量

    1.实体查询: hql="FROM User"; List list= session.createQuery(hql).list(); for(Object obj:list){ ...

  7. PLSQL Developer 直接用ip访问指定数据库

  8. 39、生鲜电商平台-redis缓存在商品中的设计与架构

    说明:Java开源生鲜电商平台-redis缓存在商品中的设计与架构. 1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc ...

  9. Sharding-JDBC 使用入门和基本配置

    一.什么是Sharding-JDBC Sharding-JDBC定位为轻量级Java框架,在Java的JDBC层提供的额外服务.它使用客户端直连数据库,以jar包形式提供服务,无需额外部署和依赖,可理 ...

  10. 大部分人的努力程度之低，根本轮不到拼天赋-----作者meiya

            格式的正确与否,直接影响了人得阅读感受. 看到书写格式正确,分段清楚,没有错别字,叙事有条理的邮件只有寥寥几封,大多都是一段到底,标点混乱,表达不清,主题不明,短短三行就有两个错别字. ...