五.文本标记

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标签和属性二的更多相关文章

  1. javaweb学习总结(二十六)——jsp简单标签标签库开发(二)

    一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段, ...

  2. 关于html标签和属性的基本理解

    一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...

  3. Struts2的标签库(二)——OGNL表达式

    Struts2的标签库(二) --OGNL表达式 1.Struts2中的OGNL表达式增加了ValueStack的支持. 注:ValueStack--实际上是一个容器对象,该对象在启动Struts2框 ...

  4. label标签的属性

    //label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...

  5. HTML初学者常用标签及属性

    1.HTML5头部结构   [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行.   [meta标签] 1-charset属性:单独 ...

  6. 对HTML5标签的认识(二)

    ---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...

  7. js-取值&赋值-获取某标签某属性的值

      js 取值&赋值-获取某标签某属性的值 CreateTime--2016年10月16日16:35:34 Author:Marydon 1.取值 //方法一 //自定义属性必须用getAtt ...

  8. javaweb(二十六)——jsp简单标签标签库开发(二)

    一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段, ...

  9. h5废弃的标签和属性及新增的标签和属性

    一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...

随机推荐

  1. metaspliot(一)

    来自山丘安全实验室 陈毅 https://www.cnblogs.com/sec875/articles/12243725.html linux下载与更新 apt-get update apt-get ...

  2. PHP 新特性:如何善用接口与Trait

    首先! 接口也可以继承,通过使用 extends 操作符. 案例: <?php interface a { public function foo(); } interface b extend ...

  3. VHD VHDX 区别

    A Virtual hard disk is saved either with VHD or VHDX file extension. VHD is the older while VHDX is ...

  4. Windows环境,获取当前线程的ID,GetCurrentThreadId

    GetCurrentThreadId 打印格式:0x%08lx 头文件:processthreadsapi.h (include Windows Server 2003, Windows Vista, ...

  5. 基于 Docker 构建企业 Jenkins CI平台

    持续集成(Continuous Integration,CI):代码合并.构建.部署.测试都在一起,不断地执行这个过程,并对结果反馈. 持续部署(Continuous Deployment,CD):部 ...

  6. Linux Centos7(Mac)安装Docker

    docker 强调隔离性 docker:官网 docker:镜像官网:        镜像官网可以所有应用,选择安装环境:会给出安装命令,例如:docker pull redis 默认拉取最新的版本( ...

  7. Ali_Cloud++:阿里云服务器部署【禅道】项目管理系统

    1.开源版安装包下载 地址一:百度云下载 10.0  提取码:2dyg  地址二:官方下载 2.直接解压安装包到/opt目录下 注意:这里我安装的是Linux一键安装包官方给出的方法就是直接解压到/o ...

  8. slow-log 和bin-log相关参数介绍

    1. slow-log show global status Slow_queries   --------慢查询的次数,即查询的时间超过long_query_time设置的时间(不能修改) 配置文件 ...

  9. mac OS 安装 nvm

    nvm官网 https://github.com/creationix/nvm nvm,node,npm之间的区别 nvm:nodejs 版本管理工具 一个 nvm 可以管理很多 node 版本和 n ...

  10. Aurora: 来自 Amazon 的高性能的企业级关系数据库,兼容 MySQL

    近日,在美国召开的AWS re:Invent云计算大会上,Amazon高级副总裁安迪·杰西发布了企业级关系数据库Aurora.Aurora是一个面向Amazon RDS(关系数据库服务).兼容MySQ ...