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.表格的复杂应用
①行分组
最新文章
- 转!java基础笔记
- html特殊字符转义问题(转!)
- ASP.NET运行时详解 生命周期入口分析
- mysql 免安装版本 命令安装
- 非常陌生的cmake
- net 关于系统性能调优了解和看法
- 每天点滴的进行,css+div简单布局...布局
- angular4在prod模式下的JIT编译问题
- tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解
- 南京邮电大学//bugkuCTF部分writeup
- windows无法安装msi文件
- csla框架__使用Factory方式实现Csla.BusinessBase对象数据处理
- 刷题之路第三题--Longest Substring Without Repeating Characters
- HDU4779 Tower Defense 组合数学
- 20165319 2017-2018-2《Java程序设计》课程总结
- pyqt5-对文本样式进行操作
- window中磁盘空间不足但是找不到使用空间的文件
- 【Java多线程】线程同步方法概览
- Lottie开源库实现Android动画效果
- CentOS 7提示:ERROR unsupported format character &#39;(0xffffffe7) at/域安装失败,您可以运行下列命令重启您的域:
热门文章
- webpack3 babel相关
- [Windows] DiskPart commands
- GDI+ 绘制砂岩含量图版
- vue项目中上拉加载和下拉刷新页面的实现
- Galera将死——MySQL Group Replication正式发布
- 开发AI+诊疗生发系统,「先锋汇美」借力人工智能辅助诊疗实现头皮医学检测...
- python操作ftp文件
- js的同步与异步
- SpringMVC Root WebApplicationContext启动流程
- #Week2 Linear Regression with One Variable