Ⅰ.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. Springboot启动源码详解

    我们开发任何一个Spring Boot项目,都会用到如下的启动类 @SpringBootApplication public class Application { public static voi ...

  2. 1709: [Usaco2007 Oct]Super Paintball超级弹珠

    1709: [Usaco2007 Oct]Super Paintball超级弹珠 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 339  Solved:  ...

  3. 1637: [Usaco2007 Mar]Balanced Lineup

    1637: [Usaco2007 Mar]Balanced Lineup Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 393  Solved: 263[ ...

  4. Hadoop单机和伪分布式安装

    本教程为单机版+伪分布式的Hadoop,安装过程写的有些简单,只作为笔记方便自己研究Hadoop用. 环境 操作系统 Centos 6.5_64bit   本机名称 hadoop001   本机IP ...

  5. 关于Maven的安装及初步使用

    关于Maven的初步使用 1.  下载: 进入http://maven.apache.org/download.cgi下载  Maven 3.3.1 2.  将压缩包解压到自己的硬盘中,最好放在某个盘 ...

  6. Jmeter 正则提取器

    背景: 用户购买商品,为防止CSRF攻击,在购买请求参数中要携带token参数,token的值是随机加密处理的,每次登录值都会刷新 场景: 用户登录站点,访问商品列表,购买商品 脚本设计: 1.登录 ...

  7. （转载）一个生动的NIO描述

    原文地址:http://blog.csdn.net/zhouhl_cn/article/details/6568119 传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大 ...

  8. Android Fragment 开发（一）

    最近在学习Fragment 的使用,想弄一个在子窗体中调用父的方法,一直报错,终于找到解决方法啦 父窗体名称:MainActivity 父中有一个public的方法show() 子窗体调用: Main ...

  9. 《Machine Learning》系列学习笔记之第一周

    <Machine Learning>系列学习笔记 第一周 第一部分 Introduction The definition of machine learning (1)older, in ...

  10. 为APP加入一个欢迎页面

    ###添加软件闪图使用的方法: new Handler().postDelayed(new Runnable() {            @Override            public vo ...