初识HTML

Posted on   |     |   Views

HTML基础

Hyper text markup language 超文本标记语言

  • 超文本：网页中可以包含图片、文字、视频、音频、文本框等元素;
  • 标记（标签）：在网页中给网页元素做标记（右键，查看网页源代码）
  • 超链接： 实现网页之间的跳转，

Sublime常用快捷键

  • Windows+D 返回桌面
  • Windows+R 运行dos
  • Windows+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 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<! Doctype html>   <!--声明文档类型-->
<html> <!--根标签-->
<head> <!--头部标签-->
<title>标题</title> <!--网页标题标签-->
</head>
<body>
  <div>网页主体</div> <!--网页主体标签-->
</body>
</html>
解析：
<! Doctype html>    
<html>             
<head>          
<title></title>    
</head>
<body></body>   
</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标签

单标签

1
2
3
<!--注释: 快捷键Ctrl+/--> 
<br/>  换行
<hr/>  水平线

双标签

  • 段落标签：<p></p>
  • 文本标签：<font></font>
  • 标题标签：
1
2
3
4
<h1></h1>
<!--h1只能出现一次，出现多了不利于搜索引擎-->
<h2></h2>
<h6></h6>

标题系列取值只能取到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" />
  • 绝对路径：
    • 本地电脑绝对路径 <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里面可以放任何标签

  • 有序列表
1
2
3
4
5
6
7
<ol>
  <li>打开冰箱门</li>
  <li>把大象装在冰箱里</li>
  <li>关上冰箱门</li>
</ol>
<ol type="A"></ol>
<ol type="1" start="4"></ol>

type 的取值可以是1，a，A，i，I

start 是开始的序号

  • 自定义列表
1
2
3
4
<dl>
  <dt>北京</dt>  <!--小标题-->
  <dd>昌平区</dd>  <!—标题的解释-->
</dl>

其他标签

  • 音乐标签 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>
感谢您的支持！