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. 2016级算法期末上机-G.中等·Bamboo's Fight with DDLs II

    中等·Bamboo's Fight with DDLs II 分析 一句话:给定字符串,求最长回文子序列长度,动态规划LCS思想的进阶应用 具体思路如下: 对于任意字符串,如果头尾字符相同,那么字符串 ...

  2. 1.需要对txt存放的测试数据做去重处理，代码如下

    采用集合去重,在新文件里逐行写入,达成目的 old_file = "D:/testdata/memberId.txt" #old result_file = "D:/te ...

  3. SBC应用

    在VoIP呼叫中主要使用会话发起协议(SIP),H.323和MGCP呼叫信令协议,Sbc 在主叫和被叫的信令/媒体路径之间引入. 通常,SBC隐藏网络拓扑,接管呼入并生成到新的请求分支到被叫.技术上叫 ...

  4. Q64 最小路径和

    给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], [1,5,1], ...

  5. 最小生成树--牛客练习赛43-C

    牛客练习赛43-C 链接: https://ac.nowcoder.com/acm/contest/548/C 来源:牛客网 题目描述 ​ 立华奏是一个刚刚开始学习 OI 的萌新. 最近,实力强大的 ...

  6. Mac下截图工具

    苹果系统自带截图功能 1.截取全屏:快捷键(Shift+Command+3) ▲直接按“Shift+Command+3“快捷键组合,即可截取电脑全屏,图片自动保存在桌面. 2.截图窗口:快捷键(Shi ...

  7. [DPF] DPF 常见的问题

    问题一: SQL6031N  Error in the db2nodes.cfg file at line number "5".  Reason code "12&qu ...

  8. (转)CentOS7安装KVM虚拟机详解

    原文:https://github.com/jaywcjlove/handbook/blob/master/CentOS/CentOS7%E5%AE%89%E8%A3%85KVM%E8%99%9A%E ...

  9. Java网络编程基础之TCP粘包拆包

    TCP是个"流"协议,所谓流,就是没有界限的一串数据.大家可以想象河里的流水,他们是连成一片的,其间并没有分界线.TCP底层并不了解上层业务数据的具体含义,他会根据TCP缓冲区的实 ...

  10. 第1章—Spring之旅—简化Spring的java开发

    简化Spring的java开发 1.1简介 区别于EJB的特性 简化javaBean,为了降低java开发的复杂性,Spring采取了以下4种关键策略: 基于POJO的轻量级和最小入侵性编程 通过依赖 ...