Ⅰ.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. Scrapy 初体验

    开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...

  2. 九度OJ题目1208：10进制 VS 2进制 (JAVA)

    题目描述: 对于一个十进制数A,将A转换为二进制数,然后按位逆序排列,再转换为十进制数B,我们乘B为A的二进制逆序数.     例如对于十进制数173,它的二进制形式为10101101,逆序排列得到1 ...

  3. UWP--集合绑定数据

    使用 ObservableCollection   列表控件主要是 ListBox.ListView.GridView 等. 为列表控件绑定数据不再是为 DataContext 属性赋值,应该使用列表 ...

  4. otool介绍（转http://www.mc2lab.com/?p=68）

    1. Otool简介 Otool可以提取并显示ios下目标文件的相关信息,包括头部,加载命令,各个段,共享库,动态库等等.它拥有大量的命令选项,是一个功能强大的分析工具,当然还可以做反汇编的工具使用. ...

  5. 深度学习实践系列（1）- 从零搭建notMNIST逻辑回归模型

    MNIST 被喻为深度学习中的Hello World示例,由Yann LeCun等大神组织收集的一个手写数字的数据集,有60000个训练集和10000个验证集,是个非常适合初学者入门的训练集.这个网站 ...

  6. curl javaSSm框架中传入json数组的格式方法

    curl与java结合传入get.post,head请求, 比如: curl的地址: curl -l 127.0.0.1:8080/spacobj/core/do?acid=100 -H " ...

  7. （28）初识struts框架

    案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其 ...

  8. JDBC连接数据以及操作数据

    好久没有写博文了,写个简单的东西热热身,分享给大家. jdbc相信大家都不陌生,只要是个搞java的,最初接触j2ee的时候都是要学习这么个东西的,谁叫程序得和数据库打交道呢!而jdbc就是和数据库打 ...

  9. efwplusUI框架，支持在Liunx服务器运行的Web开发框架，C#开发

    efwplusUI开发框架 这是一个简单Web框架,前台采用amaze UI +requireJS+handlebarsJS,后台采用WebApi+MongoDB,用Nginx做Http服务器,随着. ...

  10. 在Windows的DOS中运行java编程中的问题

    1.苦恼着我的就是找不到或无法加载主类!