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 写在前面 千呼万唤始出来 ...
随机推荐
- 隔离python 运行环境和Pycharm 设置代码同步
隔离python 运行环境 查看当前有哪些虚拟环境:workon 进入虚拟环境:workon django 退出虚拟环境:deactivate 创建虚拟环境: mkvirtualenv -p /usr ...
- 再也不怕aop的原理了
1 aop是什么 java的核心思想是面向对象,aop是面向切面编程.是对面向对象的一个补充,简单通俗的理解下aop,假设我们上楼梯,我的目标是三楼,我直接朝我的三楼直接过去,但是我可以在二楼的时候去 ...
- 浅谈postMessage跨域通信与localStorage实现跨域共享
https://www.cnblogs.com/tyrion1990/p/8134384.html
- android samsung note3 device not found
descriptiong : android samsung note3 device not found solution: usb link by PTP, DONE! (be curiosly ...
- dubbo集群容错之LoadBalance
原文地址:Dubbo 源码分析 - 集群容错之 LoadBalance dubbo 提供了4种负载均衡实现,分别是基于权重随机算法的 RandomLoadBalance.基于最少活跃调用数算法的 Le ...
- dubbo服务暴露过程
所谓服务暴露最终做的事情:绑定网络端口,开启serversokect服务以接收外部请求 服务暴露时序图 本地暴露 远程暴露 整体总结 dubbo服务提供者暴露服务的主过程:首先 ServiceConf ...
- hadoop完全分布式手动安装(一主多从centos linux各版本均试验成功,文档完整无一遗漏)
hadoop完全分布式手动安装(一主多从centos linux各版本均试验成功,文档完整无一遗漏) 网上的文章99%都是垃圾,我凭良心书写,确保幼儿园同学也能安装成功! 查看系统环境 1.查看 ...
- (转)MySQL 主从复制搭建,基于日志(binlog
原文:http://blog.jobbole.com/110934/ 什么是MySQL主从复制 简单来说,就是保证主SQL(Master)和从SQL(Slave)的数据是一致性的,向Master插入数 ...
- vSphere虚拟主机安装Centos7系统
经过上一帖的主机设置,这一步就可以开始安装系统了,本次详细记录各个过程并分析结果. Centos7 1.右键点击列表中的虚拟主机,打开控制台. 点击绿色开机键,开始安装. 这里有一个很关键的点,就是上 ...
- VS2015 MSVCRTD.lib(_chandler4gs_.obj) : error LNK2019: unresolved external symbol __except_handler4_common referenced in function __except_handler4
今天在VS2015中用编译好的QT5静态库打包软件,配置好QT的静态环境后, 发现报MSVCRTD.lib(_chandler4gs_.obj) : error LNK2019: unresolved ...