html——标签分类

标签分类

  1. 文件标签:构成html最基本的标签
  • html:html文档的根标签
  • head:头标签。用于指定html文档的一些属性。引入外部的资源
  • title:标题标签。
  • body:体标签
  1. 文本标签:和文本有关的标签
  • 注释:< !-- 注释内容 -->

  • < h1> to < h6>:标题标签

  • h1~h6:字体大小逐渐递减

  • < p >:段落标签

  • < br>:换行标签

  • < hr>:展示一条水平线
    1. 属性:
    2. color:颜色
    3. width:宽度
    4. size:高度
    5. align:对其方式
    6. center:居中
    left:左对齐
    right:右对齐
    7. < b>:字体加粗
    8. < i>:字体斜体
    9. < font>:字体标签
    属性:
    color:颜色
    size:大小
    face:字体
    10. < center>:文本居中

  • 属性定义:
    color:
    1. 英文单词:red,green,blue
    2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
    3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF

    width:
    1. 数值:width=‘20’ ,数值的单位,默认是 px(像素)
    2. 数值%:占比相对于父元素的比例

    案例:公司简介

<!DOCTYPE html>
				<html lang="ch">
				<head>
				    <meta charset="UTF-8">
				    <title>黑马程序员简介</title>
				</head>
				<body>
				
				<h1>
				    公司简介
				</h1>
				<hr color="#ffd700">
				
				<p>
				<font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。
				</p>
				
				<p>
				目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。
				</p>
				
				<p>
				
				黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。
				中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
				</p>
				
				<p>
				
				一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
				</p>
				
				<hr color="#ffd700">
				
				<font color="gray" size="2">
				    <center>
				        江苏传智播客教育科技股份有限公司<br>
				        版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
				    </center>
				</font>
				
				
				
				</body>
				</html>
  1. 图片标签:
  • img:展示图片
    属性:
    src:指定图片的位置
代码:
 <!--展示一张图片 img-->

			    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
			
			    <!--
			        相对路径
			            * 以.开头的路径
			                * ./:代表当前目录  ./image/1.jpg
			                * ../:代表上一级目录
			     -->
			
			    <img src="./image/jiangwai_1.jpg">
			
			    <img src="../image/jiangwai_1.jpg">
  1. 列表标签:
  • 有序列表:
    ol:有序标签
    li:列表的每一个项目
  • 无序列表:
    ul:无序标签
    li:列表的每一个项目
  1. 链接标签:
  • a:定义一个超链接
    属性:
    1. href:指定访问资源的URL(统一资源定位符)
    2. target:指定打开资源的方式
    3. _self:默认值,在当前页面打开
    4. _blank:在空白页面打开

    代码:

<!--超链接  a-->

			    <a href="http://www.itcast.cn">点我</a>
			    <br>
			
			    <a href="http://www.itcast.cn" target="_self">点我</a>
			    <br>
			    <a href="http://www.itcast.cn" target="_blank">点我</a>
			
			    <br>
			
			    <a href="./5_列表标签.html">列表标签</a><br>
			    <a href="mailto:itcast@itcast.cn">联系我们</a>
			
			    <br>
			    <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
  1. div和span:
  • div:每一个div占满一整行。块级标签
  • span:文本信息在一行展示,行内标签 内联标签
  1. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
  • < header>:页眉
  • < footer>:页脚
  1. 表格标签:
  • table:定义表格
    1. width:宽度
    2. border:边框
    3. cellpadding:定义内容和单元格的距离
    4. cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
    5. bgcolor:背景色
    6. align:对齐方式
  • tr:定义行
    1. bgcolor:背景色
    2. align:对齐方式
  • td:定义单元格
    属性:
    1. colspan:合并列
    2. rowspan:合并行
  • th:定义表头单元格
  • < caption>:表格标题
  • < thead>:表示表格的头部分
  • < tbody>:表示表格的体部分
  • < tfoot>:表示表格的脚部分
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值