web第一章(html)

HTML介绍

HyperText(超文本) Markup（标记） Language（语音） 类似于XML都是由标签组成

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

浏览器兼容性问题

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

HTML文件结构

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

HTML中常见的各种标签

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

---->
段落标签独占一行
换行
水平线

简历练习：

    <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可读性更强见名知意头部体部脚部

标签的分类

块级元素：独占一行包括：div，h1-h6, p,hr
行内元素：和其它行内元素共占一行包括：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)的更多相关文章

web学习第一章
web学习第一章我是大概9月10日开始走上IT之路的,一开始学习了小段时间的自动化办公软件, 昨天我开始学习客户端网页编程,我了解什么是WEB,一些比较老古董的计算模式和发展历史,印象最让我深刻 ...
精通Web Analytics 2.0 （3）第一章：网站分析的新奇世界
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术第一章:Web Analytics 2.0的新奇世界多年以来,我们很清楚的知道,网站分析能够真正的改革网络上业务的完成方式.那 ...
第一章创建WEB项目
第一章创建WEB项目一.Eclipse创建WEB项目方法/步骤1 首先,你要先打开Eclipse软件,打开后在工具栏依次点击[File]>>>[New]>>&g ...
web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
Go Web 编程第一章 Web相关概念
第一章 Go与Web应用 Go学习群:415660935 1.1 Web应用在计算机的世界里,应用(application)是一个与用户进行交互,并完成用户特定任务的软件程序.而Web应用则是部署在 ...
第一章了解Web及网络基础
第一章了解Web及网络基础 Web建立基础.HTTP如何诞生发展 1.使用HTTP协议访问Web 在浏览器地址栏中输入URL之后过程: 1)DNS 解析:浏览器查询 DNS,获取域名对应的 IP 地 ...
《零成本实现Web自动化测试--基于Selenium》第一章自动化测试基础
第一篇 Selenium 和WebDriver工具篇第一章自动化测试基础 1.1 初识自动化测试自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章入门篇-开篇及总体规划
.NET Core实战项目之CMS 第一章入门篇-开篇及总体规划原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面千呼万唤始出来 ...

随机推荐

SAE实践——创建新应用开启MySQL服务
1. 创建SAE应用当创建完成SAE账户之后,即可创建SAE应用.点击创建新应用按钮,创建一个新的SAE 应用阅读提示信息,等待五秒,点继续创建. 填写应用信息完成创建.可选择PHP5.3和空应用 ...
c++之选择排序和冒泡排序实现
1.冒泡排序冒泡排序就是通过对比前一个和后一个数的大小,按照规则进行顺序的调换.每一轮对比之后最大或者最小值都会浮到最上面或者沉到最低下. 如:对这一数组进行冒泡排序:int a[5]{34,12 ...
WCF系列教程之WCF操作协定
一.简介 1.在定义服务协定时,在它的操作方法上都会加上OperationContract特性,此特性属于OperationContractAttribute 类,将OperationContract ...
Oracle练习笔记
1 基本查询 SQL> --当前用户 SQL> show user USER 为 "SCOTT" SQL> --当前用户下的表 SQL> select * ...
2018最新win10 安装tensorflow1.4（GPU/CPU）+cuda8.0+cudnn8.0-v6 + keras 安装CUDA失败导入tensorflow失败报错问题解决
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9747019.html 基本开发环境搭建 1. Microsoft Windows 版本关于W ...
c++ 网络编程课设入门超详细教程 ---目录
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9663167.html c++ 网络编程(一)TCP/UDP windows/linux 下入门 ...
深入理解java集合框架之---------Arraylist集合
ArrayList简介 ArrayLIst是动态数组,用MSDN的说法就是Array的复杂版本,它提供了动态的增加和减少元素,实现了Collection和List接口,可以灵活的设置数组的大小,要注意 ...
如果天空不死博客java阅读列表整理
如果天空不死的主页https://home.cnblogs.com/u/skywang12345 下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01 ...
HDU 1465 不容易系列之一（排错公式）
大家常常感慨,要做好一件事情真的不容易,确实,失败比成功容易多了! 做好“一件”事情尚且不易,若想永远成功而总从不失败,那更是难上加难了,就像花钱总是比挣钱容易的道理一样. 话虽这样说,我还是要告诉 ...
*2.3.4_封装成agent
上一节在验证平台中加入monitor时,读者看到了driver和monitor之间的联系:两者之间的代码高度相似.其本质是因为二者处理的是同一种协议,在同样一套既定的规则下做着不同的事情.由于二者的这 ...

web第一章(html)

HTML介绍

浏览器兼容性问题

HTML文件结构

HTML中常见的各种标签

简历练习：

列表标签

无序列表

有序列表

定义列表

列表嵌套

分区标签

标签的分类

空格折叠现象

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

图片标签

图片地图

课程回顾

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

随机推荐

热门专题