HTML标签和属性二
五.文本标记
7.文本样式
<b></b> <strong></strong> 加粗 <i></i> <em></em> 斜体 <s></s> <del></del> 删除线 H5推荐使用有语义的标签 <u></u> 下划线 <sup></sup> 上标 <sub></sub> 下标 |
8.分区元素
①块级分区<div></div>
用于页面布局的 特点:独立成行 |
②行分区<span></span>
同一行文字使用不同样式的时候,使用span 特点:与其他span共用一行 10:07~10:22休息 |
9.元素的显示方式
①块级元素
在网页中独占一行的元素就是块级元素 默认是从上往下排列 ex:div h1~h6 p pre |
②行内元素
在网页中能够在一行内显示的元素(后期加深学习) 同一行中,从左往右排列 ex:span b i em....... |
③行内块
④table
⑤flex 弹性
六.图像和链接
1.图像语法
<img> 或者 <img/> <img src="图片路径/url"> |
2.url
Uniform Resource Locator 统一资源定位符 俗称:路径 |
3.路径的表现形式
①绝对路径
完整的路径 1.使用任何网络资源的时候,使用绝对路径 http://cdn.tmooc.cn/bsfile/imgad/2049A.png 通信协议://主机名/文件目录结构/文件名称 优点:不占用本地存储空间 缺点:不稳定 2.使用本机资源使用绝对路径,项目中不许使用 <img src="c:\08.png"> |
②相对路径
参照物,访问资源的HTML文件 1.兄弟关系,直接写文件名称 2.子集目录 先进入兄弟文件夹,再引入图片 ex src="img/09.png" 3.父级目录,使用../返回到父级目录 ex src="../../img/07.png" |
4.img标签的属性
src:source源 设置图片资源路径 alt:图片资源出现错误时,显示的文本 width:设置图片的宽度 height:设置图片的高度 如果设置的宽高比,不符合图片本身的宽高比,图片会发生失真 解决方法,宽高只设置一个,另外一个自动适应 |
5.链接
①语法
<a href=""></a> 属性 1.href 2.target 指定打开链接的方式 取值 1._self 默认,在当前标签页打开新的网页 2._blank 在新的标签页中打开 |
②a标签的其它表现形式
1.下载资源 <a href="*.zip"></a> 2.链接到电子邮件 <a href="mailto:chengliang@163.com">打开邮箱</a> 3.返回页面顶部 <a href="#">返回页面顶部</a> 4.使用a标签,执行js <a href="javascript:show()">点点我</a> |
6.锚点
①锚点是什么
锚点,就是在页面上做的一个记号 可以通过点击a标签,跳转到这个记号 |
②使用锚点
1.定义锚点 a.h4的方案<a name="锚点名称"></a> b.<any id="锚点名称"> 2.使用a标签跳转到锚点 <a href="#锚点名称"></a> |
七.表格
1.表格语法
①标记
<table></table> 表格 <tr></tr> 行---table row <td></td> 列---table data table中,所有的数据写在td中 <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 简写方式 table>tr*4>td*3>a{123} |
②属性
table元素的属性 border="2px" 设置表格边框 width="150px" 设置表格宽度 height="200px" 设置表格高度 align="center" 设置表格本身的水平对齐方式 取值 left/center/right bgcolor="pink" 设置背景颜色 bordercolor="red"设置边框颜色 cellpadding="50px" 设置单元格的内边距(内容到边框的距离) cellspacing="20px" 设置单元格的外边距(边框到边框的距离) |
①colspan 跨列2.不规则的表格
colspan 从指定单元格开始,横向向右合并N个单元格,n包含自己 被合并的单元格要删除掉 |
②rowspan 跨行
rowspan 从指定单元格开始,纵向向下合并N个单元格,n包含自己 被合并的单元格要删除 |
3.表格中的可选标记
①表格标题
<caption></caption> 要紧跟<table>标签 |
②行/列的标题
<th></th> 代替td,内容字体加粗,水平居中 |
4.表格的复杂应用
①行分组
HTML标签和属性二的更多相关文章
- javaweb学习总结(二十六)——jsp简单标签标签库开发(二)
一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段, ...
- 关于html标签和属性的基本理解
一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...
- Struts2的标签库(二)——OGNL表达式
Struts2的标签库(二) --OGNL表达式 1.Struts2中的OGNL表达式增加了ValueStack的支持. 注:ValueStack--实际上是一个容器对象,该对象在启动Struts2框 ...
- label标签的属性
//label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...
- HTML初学者常用标签及属性
1.HTML5头部结构 [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行. [meta标签] 1-charset属性:单独 ...
- 对HTML5标签的认识(二)
---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...
- js-取值&赋值-获取某标签某属性的值
js 取值&赋值-获取某标签某属性的值 CreateTime--2016年10月16日16:35:34 Author:Marydon 1.取值 //方法一 //自定义属性必须用getAtt ...
- javaweb(二十六)——jsp简单标签标签库开发(二)
一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段, ...
- h5废弃的标签和属性及新增的标签和属性
一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...
随机推荐
- metaspliot(一)
来自山丘安全实验室 陈毅 https://www.cnblogs.com/sec875/articles/12243725.html linux下载与更新 apt-get update apt-get ...
- PHP 新特性:如何善用接口与Trait
首先! 接口也可以继承,通过使用 extends 操作符. 案例: <?php interface a { public function foo(); } interface b extend ...
- VHD VHDX 区别
A Virtual hard disk is saved either with VHD or VHDX file extension. VHD is the older while VHDX is ...
- Windows环境,获取当前线程的ID,GetCurrentThreadId
GetCurrentThreadId 打印格式:0x%08lx 头文件:processthreadsapi.h (include Windows Server 2003, Windows Vista, ...
- 基于 Docker 构建企业 Jenkins CI平台
持续集成(Continuous Integration,CI):代码合并.构建.部署.测试都在一起,不断地执行这个过程,并对结果反馈. 持续部署(Continuous Deployment,CD):部 ...
- Linux Centos7(Mac)安装Docker
docker 强调隔离性 docker:官网 docker:镜像官网: 镜像官网可以所有应用,选择安装环境:会给出安装命令,例如:docker pull redis 默认拉取最新的版本( ...
- Ali_Cloud++:阿里云服务器部署【禅道】项目管理系统
1.开源版安装包下载 地址一:百度云下载 10.0 提取码:2dyg 地址二:官方下载 2.直接解压安装包到/opt目录下 注意:这里我安装的是Linux一键安装包官方给出的方法就是直接解压到/o ...
- slow-log 和bin-log相关参数介绍
1. slow-log show global status Slow_queries --------慢查询的次数,即查询的时间超过long_query_time设置的时间(不能修改) 配置文件 ...
- mac OS 安装 nvm
nvm官网 https://github.com/creationix/nvm nvm,node,npm之间的区别 nvm:nodejs 版本管理工具 一个 nvm 可以管理很多 node 版本和 n ...
- Aurora: 来自 Amazon 的高性能的企业级关系数据库,兼容 MySQL
近日,在美国召开的AWS re:Invent云计算大会上,Amazon高级副总裁安迪·杰西发布了企业级关系数据库Aurora.Aurora是一个面向Amazon RDS(关系数据库服务).兼容MySQ ...