Ⅰ.HTML的初识

　　1、HTML：超文本标签语言（网页源代码）

　　 2、html的基本结构：　　

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

    </body>
</html>

　　3、文档声明

　　　　
<!DOCTYPE html>

　　　　必须有，而且必须要在第一行。

Ⅱ.HTML基本标签——head

　　1、meta标签：描述文档类型和编码
　　　　　　　　　   搜索关键字和描述
　　　　　　　　　   常用属性：

　　　　1、charset：设置文档的字符集编码格式
　　　　>>>常见的字符集编码格式：
　　　　　　a.GB2312：国标码，简体中文
　　　　　　b.GBK：扩展的国标码
　　　　　　c.UTF-8：万国码 Unicode
　　　　2、http-equiv：将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：content-type（文档类型） refresh（网页定时刷新） set-cookie（设置浏览器cookie缓存）
　　　　需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容否，放到content属性中）
　　　　3、name属性：使用方法同"http-equiv"。常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。

Ⅲ.HTML的常见标签

　　1、标签分类

　　　块级标签：显示为块状，前后隔一行（自动换行）

　　　 行级标签：按行从左往右逐一显示

　　 2、常见的块级标签

　　　1）、<h1></h1>~<h6></h6>

　　　　标题标签：自动加粗，h1最大，h6最小
　　　　

<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

　　　　效果图：

　　　　

　　　　2）、<hr /> 水平线标签
　　　　3）、<p></p> 段落标签
　　　　4）、<br/> 换行标签 【html中空格的表示：“&nbsp;” 】
　　　　5）、引用标签
　　　　　　<blockquote cite="http://www.xxxx.com">
　　　　　　</blockquote>
　　　　　　引用标签，cite属性，表明引用来源，一般表明引用网址。浏览器默认显示首行缩进。
　　　　6）、预格式标签（通常用来承载代码）
　　　　　　<pre></pre> 预格式标签
　　　　　　浏览器默认显示样式：1、显示为等宽字体
　　　　　　　　　　　　　　　　2、代码中的换行空格等元素可在浏览器直接显示
<hr />
        <p>这里是一段文字阿达哒哒哒哒哒哒</p>
        <p>这里是另一段文字<br/>啊哒哒哒哒哒哒哒哒哒</p>

        <blockquote cite="http://www.jredu100.com">
            横眉冷对千夫指，俯首甘为孺子牛。
        </blockquote>

　　　　效果图：

　　　　

　　3、常用基于布局的块级标签
　　　　1）、有序列表：<ol></ol>
　　　　　　　列表项<li>可以有N多项</li>
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

　　　　2）、无序列表：<ul></ul>

　　　　　　列表项<li>可以有N多项</li>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
　　　　3）、定义描述列表：<dl></dl>
　　　　　　列表标题：<dt>一般只有一项</dt> 标题顶格显示
　　　　　　列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
<dl>
    <dt>这是定义列表的标题</dt>
    <dd>描述项第一项</dd>
    <dd>描述项第二项</dd>
    <dd>描述项第三项</dd>
</dl>
　　　　4）、组合标签：<figure></figure>
　　　　　　用于显示图片及图片标题
　　　　　　两个子标签：<img /> 图片
　　　　　　　　　　　　<figcaption></figcaption> 图片的标题
　　　　　　显示效果：图片下面一个标题，同时图片和标题前带缩进。　
        <figure>
            <img src="../img/icon.png" />
            <figcaption>这是图片标题</figcaption>
        </figure>

　　　　效果图：

　　　　

　　　　5）、分区标签：<div></div>
<div style="width: 100px;height: 100px;background-color: dodgerblue;">这是一个div</div>

　　　　效果图：

　　　　

　　4、常用的行级标签
　　　　1）、span（文本）：无实际意义，用于包裹某部分文字，修改特定样式
这是<span style="color: aquamarine;font-size: 36px;">span</span>中的文字

　　　　效果图：

　　　　

　　　　2）、【strong，em，b，i标签的区别】
　　　　　　a、strong和em都表示强调，strong显示为粗体，em显示为倾斜。而且strong强调程度比em更高。
　　　　　　b、strong和b都能加粗，em和i都能倾斜，但strong和em多了一层强调的语义。html5语言要求标签尽可能的实现语义化。
        <em>这是em中的文字</em>
        <br />
        <strong>这是strong中的文字</strong>
        <br />
        <i>这是i中的文字</i>
        <br />
        <b>这是b中的文字</b>

　　　　效果图：

　　　　

　　　　3）、q（短引用）：显示为文字，用“”引起来
        <q cite="http：//www.jredu100.com">这是短引用标签q中的文字</q>

　　　　效果图：

　　　　

　　　　4）、small（缩小字体）big（增大字体）：
　　　　　　　　small标签和big标签可以多层嵌套，直到字号达到上限或下限为止。
<small><small>这是small中的字体</small></small>
        <big>这是big中的字体</big>

　　　　效果图：

　　　　

　　　　5）、img（图片）：
　　　　　　1>、src：表示引用图片的地址。
　　　　　　　　路径地址的写法：
　　　　　　　　　　①相对路径：以当前文件为准，寻找图片地址。
　　　　　　　　　　　　a、与当前文件处于同一层的文件：直接写图片名。
　　　　　　　　　　　　b、图片在当前文件下一层：文件夹名/图片名。
　　　　　　　　　　　　c、图片在当前文件上一层：../图片名。
　　　　　　　　　　②绝对路径：file:///盘符:/文件夹/图片.后缀名 但是，严禁使用！
　　　　　　　　　　③网络地址：网络上的图片链接，一般不使用。
　　　　　　2>、height="" width="" 图片的高度宽度，可以用CSS样式（style="height:width:"）代替
　　　　　　3>、title：图片标题。当鼠标指上后显示的文字。
　　　　　　4>、alt：图片无法加载成功时，显示的文字。
　　　　　　5>、align：设置图片周围文字相对于图片的位置。top，center，bottom
        <img src="../img/icon.png" height="" width="" title="点我点我" alt="图片无法显示" align="center">dadassd
        <img src="file:///D:/HTML5/html5code/html5/img/kumamu.jpg">
        <img src="https://123p4.sogoucdn.com/imgu/2017/02/20170221182041_770.jpg"

　　　　效果图：

　　　　

　　　　6）、a（超链接）
　　　　　　1>、href：超链接的路径,可以是网络链接，也可以是本地路径（路径确定同img）
　　　　　　2>、target：超链接打开的位置。_self 自身页面（默认） _blank 新页面
　　　　　　3>、title：鼠标指上后显示的文字。
　　　　　　4>、rel：用于表明被链接文档与当前文档的关系：
　　　　　　　　　　rel="prev" 被链接文档是前一篇文档 rel="next" 被链接文档是后一篇文档
　　　　　　　　　　rel="icon" 链接文档是当前文档的图标
　　　　　　　　　　rel="stylesheet" 被链接文档是当前文档的样式表
　　　　　　　　　　*rel="prefetch" 预加载：在当前文档加载完成后，利用空余时间预加载即将链接的文档。
　　　　　　5>、锚链接：
　　　　　　　　①本页面锚链接：a.设置锚点 <a name="xxxx"></a>
　　　　　　　　　　　　　　　　b.在超链接上，使用#name跳转到对应锚点。<a href="#xxxx"></a>
　　　　　　　　②页面间锚链接：a.在即将跳转页面的指定位置设置锚点
　　　　　　　　　　　　　　　　b.在超链接的href属性中，使用"页面地址.html#name"
　　　　　　　　　　　　　　<a href=t.html#top>跳转新页面指定部分</a>
　　　　　　6>、功能性链接：mailto:zzzz@xx.com 用于给指定邮箱发邮件
　　　　　　　　　　　　　　 tencent://message/?uin=296351683 给指定qq发消息
　　　　　　　　　　　　　　 file:///E:/www/文件名 打开本地文件
        <a href="http://www.baidu.com" target="_blank" rel="next">这是一个超链接</a>
        <a href="#top" target="_self">这是另一个超链接</a>
        <a href="mailto:jianghao@jerei.com">发邮件</a>
        <a href="tencent://message/?uin=416616053">发qq</a>

　　　　效果图：

　　　　　　

　　　　　　7>、style="text-decoration:none;" 去掉下划线
　

【从无到有】HTML的初识——part1的更多相关文章

  1. day24 面向对象设计part1

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ----------------------------------------------------- ...

  2. Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part1：准备工作

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...

  3. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  4. Linux平台 Oracle 11gR2 RAC安装Part1：准备工作

    一.实施前期准备工作 1.1 服务器安装操作系统 1.2 Oracle安装介质 1.3 共享存储规划 1.4 网络规范分配 二.安装前期准备工作 2.1 各节点系统时间校对 2.2 各节点关闭防火墙和 ...

  5. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  6. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  7. 【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

    前言 不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没 ...

  8. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  9. UI篇（初识君面）

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

随机推荐

  1. 【2-23】分支语句（switch…case）及循环语句

    Switch-case分支语句与if语句作用相同,但需将情况都罗列出比较麻烦所以不常用. 其基本结构是: Switch(一个变量值) { Case 值1:要执行的代码段:break; Case 值2: ...

  2. oracle查看用户所占用的表空间

    select * from (select owner || '.' || tablespace_name name, sum(b) g from (select owner, t.segment_n ...

  3. Struts2学习笔记⑦

    今天我宛若一个智障- Struts2学的差不多了,今天开始做数据库CURD操作的案例,发现模型驱动一直报NullPointerException异常-.我的妈,我查了半天觉得没啥问题,把关注点放在了g ...

  4. c++ 构造函数以及explicit 关键字的使用

    关于构造函数中的隐式转换: 在一个类所定义的构造函数中,存在如下的用法: #pragma once #ifndef __EXERCISE__ #define __EXERCISE__ #include ...

  5. Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl（横向列表）

    在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在Xaml ...

  6. 利用python的爬虫技术爬取百度贴吧的帖子

    在爬取糗事百科的段子后,我又在知乎上找了一个爬取百度贴吧帖子的实例,为了巩固提升已掌握的爬虫知识,于是我打算自己也做一个. 实现目标:1,爬取楼主所发的帖子 2,显示所爬去的楼层以及帖子题目 3,将爬 ...

  7. Linux下安装Java（JDK8）

    一.文件准备 1.1 文件名称 jdk-8u121-linux-x64.tar.gz 1.2 下载地址 http://www.oracle.com/technetwork/java/javase/do ...

  8. NIO（四、Selector）

    目录 NIO(一.概述) NIO(二.Buffer) NIO(三.Channel) NIO(四.Selector) Selector 前面两个章节都描述了Buffer和Channel,那这个章节就描述 ...

  9. java初学第二章

    这两天学习了基本的数据类型还有运算符. 分享一下学习过程还有写作~ 数据类型分为基本数据类型还有引用数据类型,基本数据类型有4类8种: 整型: byte,short,int,long 浮点型:floa ...

  10. JS中的异步以及事件轮询机制

    一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步 ...