Ⅰ.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. SQL server 数据库 ——聚合函数（一列 多行，值类型）

    聚合函数 5种函数: 1.max最大值   select max(price) from car where code='c024' 2.min最小值   select * from car wher ...

  2. 3360: [Usaco2004 Jan]算二十四

    3360: [Usaco2004 Jan]算二十四 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 6  Solved: 6[Submit][Statu ...

  3. 使用 @Qualifier 注释和 @Autowired 注释通过指定哪一个真正的 bean 将会被装配来消除混乱

    1.当你创建多个具有相同类型的 bean 时,并且想要用一个属性只为它们其中的某一个进行装配,在这种情况下,你可以使用 @Qualifier 注释和 @Autowired 注释来精确配置. 2.示例 ...

  4. 感知机和线性单元的C#版本

    本文的原版Python代码参考了以下文章: 零基础入门深度学习(1) - 感知器 零基础入门深度学习(2) - 线性单元和梯度下降 在机器学习如火如荼的时代,Python大行其道,几乎所有的机器学习的 ...

  5. 对象作为 map 的 key 时，需要重写 equals 方法和 hashCode 方法

    对象作为 map 的 key 时,需要重写 hashCode 和 equals方法 如果没有重写 hashCode 方法,那么下面的代码示例会输出 null 我们首先定义一个对象:BmapPoint, ...

  6. Fibonacci数列前n项值的输出（运用递归算法）

    1.斐波那契数列: 又称黄金分割数列,指的是这样一个数列:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ... 在数学上,斐波纳契数列以如下被以递归的方法 ...

  7. python常见的特异点

    编码问题 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错.解决方法为只要在文件开头加入 # -*- coding: UTF-8 -*- 或 ...

  8. SQL Server--获取磁盘空间使用情况

    对于DBA来说,监控磁盘使用情况是必要的工作,然后没有比较简单的方法能获取到磁盘空间使用率信息,下面总结下这些年攒下的脚本: 最常用的查看磁盘剩余空间,这个属于DBA入门必记的东西: -- 查看磁盘可 ...

  9. Mobiscroll日期插件使用

    相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/w ...

  10. java学习(一)静态代码块 构造代码块 构造方法的执行顺序及注意问题

    今天我总结了一下java中静态代码块 构造代码块 构造方法的执行顺序及其注意问题 首先要知道静态代码块是随着类的加载而加载,而构造代码块和构造方法都是随着对象的创建而加载 当时做了这么一个小案例(想必 ...