HTML介绍

HyperText(超文本) Markup（标记） Language（语音） 类似于XML都是由标签组成
  • xml：是可扩展标记语言,标签可以任意自定义
  • HTML：不可以使用任意标签，学习html主要学习的就是html里面有哪些固定的标签，学习标签内部有哪些属性,还要学习标签和标签之间的嵌套关系
  • 超文本： 不仅仅是文本，还包括字体大小，颜色，样式等，还包括多媒体相关（图片，音频，视频）

浏览器兼容性问题

  • 因为不同的浏览器可能会存在兼容性问题，所以平时测试时统一使用谷歌浏览器

HTML文件结构

文档声明 根标签 头标签 给浏览器看的内容 告诉浏览器解码的字符集页面的标题体标签 给用户看的内容

HTML中常见的各种标签

  1. 文本标题标签 独占一行 属性 align="left/center/right"

    ---->

  2. 段落标签 独占一行

  3. 换行

  4. 水平线

简历练习：

    <h1 align="center">苍老师简历</h1>

    <hr>

    <h2>基本信息</h2>

    <p>姓名：苍老师</p>

    <p>性别：男</p>

    <p>爱好：苍老师</p>

    <hr>

    <h2>基本信息</h2>

    <p>曾获得2018年达内男神评选第一名<br>

    年轻时获得某校校草第一名荣誉</p>

列表标签

无序列表

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

</ul>

有序列表

    <ol type="1" start="5"

    reversed="reversed"><!-- ordered list -->

        <li>打开冰箱门</li>

        <li>把大象放进冰箱</li>

        <li>关上冰箱门</li>

    </ol>

定义列表

    <dl><!-- definition list定义列表 -->

    <!--definition title/term定义标题  -->

        <dt>凉菜</dt>

        <!--definition description 定义描述  -->

        <dd>大拌菜</dd>

        <dd>芥末鸭掌</dd>

        <dd>花毛一体</dd>

        <dt>炒菜</dt>

        <dd>木须肉</dd>

        <dd>葱爆羊肉</dd>

        <dd>溜三样</dd>

    </dl>

列表嵌套

有序和无序列表之间可以任意嵌套n层

分区标签

  • 分区标签自身没有显示效果，可以理解成一个容器，用于装页面中的元素，对页面中的元素进行统一管理。
  • div：块级分区元素，独占一行
  • span：行内分区元素，共占一行

  • 以后开发的页面一般会分为三大区：头 体 脚

    <div>头部</div>
    
<div>体部</div>
    
<div>脚部</div>
  • h5标准中增加了几个专门用于分区的元素用来取代div,相比div可读性更强见名知意 头部体部脚部

标签的分类

  1. 块级元素：独占一行 包括：div，h1-h6, p,hr
  2. 行内元素：和其它行内元素共占一行 包括：span,斜体i和em,粗体 b和strong,下划线 u, 删除线 s和del

空格折叠现象

  • 如果一行内连续多个空格最终只会识别为一个 通过

常见需要转义的特殊字符(实体引用)

  • 空格
  • 小于号 <
  • 大于号 >
  • 换行

图片标签

  • 是单标签
  • 常见属性：
  • alt：当图片不能正常显示的时候显示此内容
  • src：路径，站内资源使用相对路径 和站外资源使用绝对路径
  • title：当鼠标悬停的时候显示的文本
  • width/height: 通过像素设置宽高，通过百分比设置宽高，如果只设置宽度高度会根据原始宽高比进行缩放

图片地图

    <map id="xxx" name="xxx">

        <area shape="circle/rect" coords="280,330,32"

    href="http://doc.tedu.cn">

    </map>
  • href:指定访问的路径，地址可以指向页面(站内或站外)，还可以指向文件，如果文件浏览器可以打开则直接浏览，如果打不开则下载此文件

课程回顾

  • html文件的结构

    <!DOCTYPE html> 文档声明告诉浏览器使用什么版本解析页面
    
<html>
    
    <head> 里面写给浏览器看的内容
    
        <meta charset="UTF-8">
    
        <title>页面标题</title>
    
    </head>
    
    <body>
    
        写给用户看的内容
    
    </body>
    
</html>
  • 文本标题 h1-h6 属性： align = left/center/right
  • 段落标签 p
  • 水平分割线 hr
  • 换行 br
  • 列表：

  • 无序列表： ul li

    <ul>
    
    <li>aaa</li>
    
    <li>bbb</li>
    
</ul>

  • 有序

    <ol type="i/a/A/i/I" start="5" reversed="reversed">
    
    <li>aaa</li>
    
    <li>bbb</li>
    
</ol>

  • 定义列表

    <dl>
    
    <dt></dt>
    
    <dd></dd>
    
    <dd></dd>
    
</dl>
  • 分区元素
  • div： 块级 独占一行
  • span： 行内 共占一行
  • 页面会分为三大部分 头 体 脚
  • 元素分类
  • 块级元素 包括 div h1-h6 p hr
  • 行内元素 包括 span i和em b和strong u下划线 s和del
  • 空格
  • 小于号 <
  • 大于号 >
  • 换行
  • 图片
  • 图片地图

web第一章(html)的更多相关文章

  1. web学习第一章

    web学习第一章   我是大概9月10日开始走上IT之路的,一开始学习了小段时间的自动化办公软件, 昨天我开始学习客户端网页编程,我了解什么是WEB,一些比较老古董的计算模式和发展历史,印象最让我深刻 ...

  2. 精通Web Analytics 2.0 （3） 第一章：网站分析的新奇世界

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第一章:Web Analytics 2.0的新奇世界 多年以来,我们很清楚的知道,网站分析能够真正的改革网络上业务的完成方式.那 ...

  3. 第一章 创建WEB项目

    第一章   创建WEB项目 一.Eclipse创建WEB项目 方法/步骤1 首先,你要先打开Eclipse软件,打开后在工具栏依次点击[File]>>>[New]>>&g ...

  4. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  5. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  6. Go Web 编程 第一章 Web相关概念

    第一章 Go与Web应用 Go学习群:415660935 1.1 Web应用 在计算机的世界里,应用(application)是一个与用户进行交互,并完成用户特定任务的软件程序.而Web应用则是部署在 ...

  7. 第一章 了解Web及网络基础

    第一章 了解Web及网络基础 Web建立基础.HTTP如何诞生发展 1.使用HTTP协议访问Web 在浏览器地址栏中输入URL之后过程: 1)DNS 解析:浏览器查询 DNS,获取域名对应的 IP 地 ...

  8. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  9. net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章 入门篇-开篇及总体规划

    .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划   原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...

随机推荐

  1. OO第二单元の小结

    第二单元(线程与电梯问题)总结博客 三次作业的设计策略 第一次:本次作业只有一部电梯,而且不用捎带.因此,我一共设计了两个线程:一个负责管理输入,一个负责电梯运行.同时,我将调度队列设置为单例模式,里 ...

  2. 查看linux上面是否有安装redis

  3. 关于莫比乌斯函数的塞 ： 莫比乌斯前n项和 ， 莫比乌斯函数绝对值的前n项和

    https://ac.nowcoder.com/acm/contest/874#submit/{%22problemIdFilter%22%3A25455%2C%22statusTypeFilter% ...

  4. Q138 复制带随机指针的链表

    给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深拷贝. 示例: 输入: {"$id":"1",& ...

  5. Mac下使用Wine安装文件内容搜索工具Search and Replace

    下载: (链接: https://pan.baidu.com/s/1mij7WX6 密码: xsu8) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  6. Volley 源码解析（转）

    项目:Volley,分析者:grumoon,校对者:Trinea 本文为 Android 开源项目源码解析 中 Volley 部分项目地址:Volley,分析的版本:35ce778,Demo 地址:V ...

  7. JavaScript设计模式-12.门面模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. C#判断字符串中是否包含一个子字符串是可以直接使用Contains()方法

    1. 以前判断一个字符串中是否包含另一个子字符串时,习惯使用 IndexOf(); string str = "ABC@QQ"; if(str.IndexOf("@&qu ...

  9. tomcat+nginx+redis集群搭建并解决session共享问题。

    1 集群搭建 https://www.cnblogs.com/yjq520/p/7685941.html 2 session共享 https://blog.csdn.net/tuesdayma/art ...

  10. 发布 .Net Core WebAPI 应用程序到 Docker

    目录 1. 创建 .net core webapi 项目 2. 编译应用 3. 创建 Dockerfile 文件 4. 上传文件到服务器 5. 生成Docker Image 6. 在Docker Co ...