01-HTML深入
1.1 浏览器的工作原理
把一些标签解析成用户可视化的页面
1.2 HTML中的标签与元素
在HTML中以<xx>开始,以</xx>结束,比如<html></html>等。
标签和其内容统称为元素,比如:<xx>h5</xx>
元素可以有属性,比如 <xx src=’xxx’>h5</xx>
1.3编码
数据以什么编码存入电脑,就必须以什么编码取出(解码)。
ASCLL码
计算机编码有UTF8、GB2312
1.4 HTML文档结构
<!--文档结构是HTML5.0这个版本-->
<!DOCTYPE HTML> <html>
<!--head 页面的头部,一般用于设置一些参数给浏览器使用-->
<head></head> <body></body>
</html>
1.4.1 Head
head一般用于设置一些信息给浏览器解析时使用。一般在head中通过meta标签来设置这些参数
<head>
<!--1.设置页面的解码-->
<meta charset="utf-8"/> <!--2.让页面适应于PC、移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--3.seo搜索引擎优化-->
<mata name="keywords" content="博客园"></mata>
<mata name="description" content="米商城直营小米公司旗下所有产品,囊括小米手机系列小米Note 3、小米8、小米MIX 2S,红米手机系列红米5 Plus、红米6 Pro,智能硬件,配件及小米生活周边,同时提供小米客户服务及售后支持。"></mata>
<!--description,和上面的keywords一样,是用户不查看源代码看不到的,而且也是对于一个网页的简要内容概况。
不同的是,keywords是由几个词语的组成的,而description则是完整的一句话。description一般不超过150个字符,描述内容要和页面内容相关。
用法:<meta name=”Description” Content=”你网页的简述”>-->
<title>小米商城</title>
</head>
注:快速构建HTML结构的快捷键:!+Tab
1.5 标签的分类
1.5.1 快标签(block tag)
【1】独占一行
【2】能设置宽高
无语义标签:没有特定的用途 => 什么都可以显示 => 用于包含别的标签 => 一般用于容器容纳别的标签。
有语义标签:有特定的用途
1.5.1.1 DIV
div 是无语义标签,一般用于页面架构性布局(DIV+CSS)
<div id="top">
aaaaa
</div>
1.5.1.2 H1-H6
有语义标签,专门用于显示标题的。
<!--2 标题-->
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
1.5.1.3 列表相关
ol/li 表示有序列表(ordered list),有语义标签。li一定是作为ol的子节点。
ul/li 表示无序列表(unordered list)有语义标签,li一定是作为ol的子节点。
<!--使用ul-li
标签来完成。ul-li
是没有前后顺序的信息列表。li
是英文list item的缩写-->
<body>
<ul>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ul>
</body> <!--ul>li(然后按下Tab键)
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签--> <ul>
<li></li>
</ul>
<!--ul>li*3(然后按下Tab键) 含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签标签-->
<ul> <li></li> <li></li> <li></li> </ul>
<!--<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始--> <body>
<ol>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ol>
</body>
dl/dt+dd 表示定义列表,有语义标签,一般dd可以有多个
<!--定义列表--> <!--<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。--> <dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl> <!--defined list-->
<dl>
<!--defined title-->
<dt>程序员鼓励师</dt>
<!--defined description-->
<dd>1、长相清新,声线甜美,微笑常在,人见人爱;</dd>
<dd>2、善于倾听,善不善沟通不重要,能忍受IT工程师死宅无法交流的性格;</dd>
<dd>3、耍不耍脾气不重要,要善于发现每一个程序暖男的天性,成功驯服;</dd>
<dd>4、了解互联网,懂科技,不然聊起来云里雾里,工程师会更受打击。</dd>
</dl>
1.5.1.4 Table
table是由行(row)构成、行是由单元格(table-cell)构成。
<tr>
…</tr>
:表格的一行,所以有几对tr
表格就有几行。<td>
…</td>
:表格的一个单元格,一行中包含几对<td>
…</td>
,说明一行中就有几列。<th>
…</th>
:表格的头部的一个单元格,表格表头。- 表格中列的个数,取决于一行中数据单元格的个数。
table
表格在没有添加css
样式之前,在浏览器中显示是没有表格线的- 表头,也就是
th
标签中的文本默认为粗体并且居中显示<!--快捷方法:table>tr*3>td*3--> <!--4. table-->
<table border="1" <!--添加边框-->>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
</table>1.5.1.4.1 单元格跨列
colspan一个单元格向右占多个列。
<table border="1">
<tr>
<td>11</td>
<td colspan="2">22</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>cc</td>
</tr>
</table>
1.5.1.4.1 单元格跨行
rowspan单元格可以向下跨越多个行,被占的单元格向右挤。
<table border="1">
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td rowspan="2">aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr> <td>bb</td>
<td>cc</td>
</tr>
</table>
1.5.1.5 P
标签表示段落
<!--p 表示段落-->
<p>十年后的今天,世界经济复苏的势头远不如人们期许的那样强劲,信心的极端重要性并未减弱。然而,正如国际货币基金组织总裁拉加德所言,“笼罩世界经济的乌云正变得越来越重,最大和最重的乌云是信心的恶化”。恶化人们对世界经济发展前景信心的源头来自何方?只要随手翻一翻各国的报章,读一读那些有关美国同贸易伙伴大打贸易战忧心忡忡的报道,答案再清楚不过地摆在人们面前。</p>
<p>国际贸易是世界经济增长的重要一环,美国公开违反世贸规则,大范围挑起贸易争端,势必破坏全球贸易秩序,危害世界经济增长。世界银行上月初发布报告指出,全球关税广泛上升将会给全球贸易带来重大负面影响,对新兴市场和发展中经济体的影响尤为明显,特别是那些与美国贸易或金融市场关联度较高的经济体。权威人士预测,如果关税回到GATT/WTO(关贸总协定和世贸组织)之前的水平,世界经济将立即收缩2.5%,全球贸易量将削减60%以上,负面影响超过2008年国际金融危机。</p> <!--错误的用法:不能再p标签中再放块标签-->
<p>
<div>test</div>
</p>
1.5.1.6 br
br表示换行,<br /> 我们把这种中间没有内容的标签称为开闭同体标签。
1.5.2 行内标签
【1】 在一行内显示
【2】 不能设置宽高,内容撑开宽高
1.5.2.1 span
span 是无语义行内标签,一般作为容器使用。
<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST
1.5.2.2 a
a 表示链接
1.5.2.2.1 路径相关
<!--链接到站外-->
<a href="http://www.baidu.com/">百度</a> <!--站内链接-->
<!--绝对路径:从盘符开始的路径叫做绝对路径-->
<a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a> <!--相对路径-->
<!--当前目录:. -->
<a href="./index.html">index</a>
<a href="index.html">index</a>
相对路径 . 表示当前目录, .. 返回上一级目录。链接找资源时,一定先从当前目录开始找,所以当前目录可以省略。
1.5.2.2.3 锚点
通俗地说,锚点就是指在页面内做调整
<div id="top"></div>
<div>
<a href="#early-exp">早年经历</a><!--点击跳转到p标签的早年经历-->
<a href="#professional-exp">演艺经历</a>
<a href="#personal-life">个人生活</a>
<a href="#musics">音乐作品</a>
</div> <p id="early-exp">早年经历Lorem</p>
<p id="professional-exp">演艺经历Lo</p>
<p id="personal-life">个人生活Lorem ipsum dolor </p>
<p id="musics">音乐作品Lorem </p>
<div>
<a href="#top">TOP</a><!--点击回到顶部-->
</div>
1.5.2.3 Img
专门用于显示图片。
1.5.2.3.1常用属性
alt:当图片加载失败时的提示文本
title:当鼠标悬停时的提示文本
<img alt="阿黛尔" title="阿黛尔" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />
1.5.2.4 var/strong/em
var、strong、em 本意表示强调作用,有语义标签,强调的表现形式不一样,var/em 斜体强调,strong加粗强调。
<var>我是var</var> <!--强调字体下斜-->
<strong>我是strong</strong> <!--强调字体加粗-->
<em>我是em</em> <!--强调字体倾斜-->
在实际开发过程中,一般来说都不用他们的本意,而是把他们降级成一般的无语义行内标签使用
01-HTML深入的更多相关文章
- 01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
- 用Kotlin创建第一个Android项目(KAD 01)
原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...
- Java企业实训 - 01 - Java前奏
前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- 0042 MySQL学习笔记-入门--01
基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储 数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1
最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- 异步编程系列第01章 Async异步编程简介
p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充 三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
随机推荐
- javascript实现数据结构:稀疏矩阵的十字链表存储表示
当矩阵的非零个数和位置在操作过程中变化大时,就不宜采用顺序存储结构来表示三元组的线性表.例如,在作“将矩阵B加到矩阵A上”的操作时,由于非零元的插入或删除将会引起A.data中元素的移动.为此,对这种 ...
- python里面的encode和decode函数
转自 http://www.cnblogs.com/evening/archive/2012/04/19/2457440.html 总结一句话 encode: 字符串打算输出(给别人用)比如pr ...
- matlab练习程序(模拟退火SA)
模拟退火首先从某个初始候选解开始,当温度大于0时执行循环. 在循环中,通过随机扰动产生一个新的解,然后求得新解和原解之间的能量差,如果差小于0,则采用新解作为当前解. 如果差大于0,则采用一个当前温度 ...
- 关于使用metronic时里modal模拟框使用ueditor时不能全屏的情况
ueditor里有这么断代码, 1.初始显示状态下(非全屏),修改一下代码的z-index UE.Editor.defaultOptions = function(editor){ var _url ...
- Struts2学习-拦截器2续
定义拦截器有2种办法:1.实现Interceptor接口2.集成AbstractInterceptor抽象类 一.方法1 ..... <struts> <package name=& ...
- mif文件C语言生成
1:正弦波 用函数 sin (x * π/180°) /************************************************** 正弦波 mif 生成 ********** ...
- IOS6 的特性 及 autoalyout的作用
1.如果控件有默认的内容(宽高), 我们只需设置autoalyout的X/Y, autolayout会自动计算出宽高 2.Xcode6将Storyboard变成豆腐干的目的:在Xcode6之前, 如果 ...
- 设计模式——原型模式(Prototype Pattern)
原型模式:用原型实例制定创建对象的种类,并且通过拷贝这些原型创建新的对象. UML 图: 原型类: package com.cnblog.clarck; /** * 原型类 * * @author c ...
- HDU 4165 卡特兰
题意:有n个药片,每次吃半片,吃2n天,那么有多少种吃法. 分析:如果说吃半片,那么一定要吃过一整片,用 ) 表示吃半片,用 ( 表示吃整片,那么就是求一个正确的括号匹配方案数,即卡特兰数. 卡特兰数 ...
- 【[AHOI2012]树屋阶梯】
卡特兰数! 至于为什么是卡特兰数,就稍微说那么一两句吧 对于一个高度为\(i\)的阶梯,我们可以在左上角填一个高度为\(k\)的阶梯,右下角填一个高度为\(i-1-k\)的阶梯剩下的我们用一个大的长方 ...