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 写在前面 千呼万唤始出来 ...
随机推荐
- [原]时间格式化hh:mm:ss和HH:mm:ss区别
hh:mm:ss 按照12小时制的格式进行字符串格式化 如果时间处于00:00:00——12:59:59,则返回的字符串正常 如果时间处于13:00:00——23:59:59,则返回的字符串是实际 ...
- 3.3 PXC Strict Mode
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- leetcode-896-单调数列
题目描述: 如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i <= j,A[i] <= A[j],那么数组 A 是单调递增的. 如果对于所有 i <= j,A[i] ...
- 【转载】Analysis Service Tabular Model #003 Multidimensional Model VS Tabular Model 我们该如何选择?
由于Multidimensional Model 和 Tabular Model 并不能互相转换, 所以在项目之初就应该要考虑好选择哪一种模型进行开发. 以下只是一些建议: Licensing 许可和 ...
- [JZOJ6088] [BZOJ5376] [loj #2463]【2018集训队互测Day 1】完美的旅行【线性递推】【多项式】【FWT】
Description Solution 我们考虑将问题一步步拆解 第一步求出\(F_{S,i}\)表示一次旅行按位与的值为S,走了i步的方案数. 第二步答案是\(F_{S,i}\)的二维重复卷积,记 ...
- 【性能测试】:LR插入mysql数据库数据,脚本参数化问题
一,今天准备脚本做mysql数据库的铺地数据,脚本内容不赘述,在批量执行insert语句时候,出现一个问题: // sprintf(chQuery, "insert into table ( ...
- Python中utf-8与utf-8-sig两种编码格式的区别
As UTF-8 is an 8-bit encoding no BOM is required and anyU+FEFF character in the decoded Unicode stri ...
- java常量类的实现方式_枚举类_项目实践
前言 众所周知,系统里有很多比如订单状态.审核状态:性别.结算方式.交易类型等属性,这些属性只有几个值,一般用0.1.2.3等的数字标识存入数据库,每次对这些属性所属对象的增删改操作,都会在代码里给状 ...
- 如何自己编译生成hadoop的eclipse插件,如hadoop-eclipse-plugin-2.6.0.jar
不多说,直接上干货! 如何自己编译生成Eclipse插件,如hadoop-eclipse-plugin-2.6.0.jar 一.相关软件的安装和配置 (一)JDK的安装和配置 Jdk 1.7*安装并配 ...
- C 标准库 - ctype.h之isalpha使用
isalpha int isalpha ( int c ); Checks whether c is an alphabetic letter. 检查给定字符是否字母字符,即是大写字母( ABCDEF ...