在CSS之前，需要先介绍一下HTML的常用标签。

1.html与css的关系

　　

2.程序

 <!DOCTYPE HTML>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>Html和CSS的关系</title>

         <style type="text/css">

         h1{

             font-size:12px;

             color:#999;

             text-align:center;

         }

         </style>

     </head>

     <body>

         <h1>Hello World!</h1>

     </body>

 </html>

3.效果

　　

4.注释

　　<!--注释文字 -->

5.p标签

　　<p>段落文本</p>

6.hx标签

　　文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。

　　标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

　　<hx>标题文本</hx>

7.strong与em标签

　　但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。

　　并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

　　<em>需要强调的文本</em>

　　<strong>需要强调的文本</strong>

8.span标签

　　使用<span>标签为文字设置单独样式

　　标签是没有语义的，它的作用就是为了设置单独的样式用的

　　

9.q标签

　　<q>标签，短文本引用。

　　注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

10.blockquote

　　<blockquote>标签，长文本引用

　　浏览器对<blockquote>标签的解析是缩进样式。

11.br标签（*）

　　<br />标签作用相当于word文档中的回车。

　　这是一个空标签。

　　空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />

12.添加空格

　　要想输入空格，必须写入&nbsp;。

　　

13.hr

　　<hr>标签，添加水平横线

　　

14.address

　　<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

　　 在浏览器上显示的样式为斜体。

15.code标签

　　加入一行代码。

　　<code>var i=i+300;</code>

16.pre标签

　　需要在网页中预显示格式时都可以使用它。

　　如果是多行代码，可以使用<pre>标签。

　　标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

17.ul标签

　　添加信息列表。

　　这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

18.ol标签

　　在网页中展示有前后顺序的信息列表。

　　<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。

19.div标签

　　在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

　　为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

　　

20.table标签　　

　　创建表格的四个元素：table、tbody、tr、th、td。

　　<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

　　<th>…</th>：表格的头部的一个单元格，表格表头。也就是th标签中的文本默认为粗体并且居中显示。

　　<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

21.为表格添加边框（css样式）

　　添加黑色边框。

　　<style type="text/css">

　　　　table tr td,th{border:1px solid #000;}

　　</style>

22.caption标签

　　为表格添加标题和摘要。

　　A：摘要

　　<table summary="表格简介文本">。

　　摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

　　B:标题　

　　<caption>标题文本</caption>

　　用以描述表格内容，标题的显示位置：表格上方，tr上方。

23.a标签

　　<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

　　

24.在新的窗口打开链接

　　<a href="目标网址" target="_blank">click here!</a>

25.img标签　

　　1、src：标识图像的位置；

　　2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

　　3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

　　4、图像可以是GIF，PNG，JPEG格式的图像文件。

26.form表单

　　表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

　　<form method="传送方式" action="服务器文件">　

　　<label for="username">用户名:</label>

　　<input type="text" name="username" />

27.输入框（文本，密码）

　　<form>

　　　　<input type="text/password" name="名称" value="文本" />

　　</form>

　　1、type：

  　　 当type="text"时，输入框为文本输入框;

  　　 当type="password"时, 输入框为密码输入框。

　　2、name：为文本框命名，以备后台程序ASP 、PHP使用。

　　3、value：为文本输入框设置默认值。(一般起到提示作用)

28.textarea文本域

　　<textarea rows="行数" cols="列数">文本</textarea>

29.单选框与复选框 radio/checkbox

　　<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

　　1、type:

　　当 type="radio" 时，控件为单选框

　　 当 type="checkbox" 时，控件为复选框

　　2、value：提交数据到服务器的值（后台程序PHP使用）

　　3、name：为控件命名，以备后台程序 ASP、PHP 使用

　　4、checked：当设置 checked="checked" 时，该选项被默认选中

　　

30.下拉框select

　　设置selected="selected"属性，则该选项就被默认选中。

　　

31.提交按钮

　　<input type="submit" value="提交">

　　value：按钮上显示的文字

32.重置

　　<input type="reset" value="重置">

　　value：按钮上显示的文字

33.label标签

　　如果你在 label 标签内点击文本，就会触发此控件。

　　就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

　　<label for="控件id名称">

　　标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

　　

　　

000 Html基本标签与案例的更多相关文章

  1. Hadoop基础--统计商家id的标签数案例分析

    Hadoop基础--统计商家id的标签数案例分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.项目需求 将“temptags.txt”中的数据进行分析,统计出商家id的评论标 ...

  2. javaweb学习总结(二十七)——jsp简单标签开发案例和打包

    一.开发标签库 1.1.开发防盗链标签 1.编写标签处理器类:RefererTag.java 1 package me.gacl.web.simpletag; 2 3 import java.io.I ...

  3. JS---DOM---元素创建的不同方式---三种方式，5个案例

    元素创建-----为了提高用户的体验   元素创建的三种方式: 1. document.write("标签的代码及内容"); 2. 对象.innerHTML="标签及代码 ...

  4. 自定义标签 与 JSTL（JSP Standard Tag Library）

    1.自定义标签 [理解]     [1]简介            > 在JSP2.0以后,在jsp页面中不建议使用脚本片段<% %>和JSP表达式<%= %>     ...

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

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

  6. 使用hessian+protocol buffer+easyUI综合案例--登陆

    首先先简单介绍下hessian ,protocol buffer, easyUI框架 hessian: Hessian是一个轻量级的remoting on http工具,采用的是Binary RPC协 ...

  7. 12、Jsp加强/自定义标签/JavaBean

    1 Jsp加强回顾 Jsp加强 1)Jsp的9大内置对象 request       HttpServletRequet response     HttpServletResponse config ...

  8. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  9. JSP 标准标签库（JSTL）（JSP Standard Tag Library）

    [1] JSTL简介    > JSTL是JSP的标准标签库    > JSTL为我们提供了一些常用的标签,供我们日常开发使用(if . if...else .遍历 . 日期格式化)   ...

随机推荐

  1. 解题：HDU 5868 Different Circle Permutation

    题面 先往上套Burnside引理 既然要求没有$\frac{2*π}{n}$的角,也就是说两个人不能挨着,那么相当于给一个环黑白染色,两个相邻的点不能染白色,同时求方案数.考虑$n$个置换子群,即向 ...

  2. 解题：ZJOI 2006 皇帝的烦恼

    禁止DP,贪心真香 有一个比较明显的贪心思路是让每个人和距离为$2$(隔着一个人)的人尽量用一样的,这样只需要扫一遍然后对每对相邻的人之和取最大值即可.但是当人数为奇数时这样就会出锅,因为最后一个人和 ...

  3. 【codevs1959】拔河比赛

    题目大意:给定一个有 N 个数的集合,将这 N 个数均分成两堆,求差值最小是多少. 题解:有关集合选数的问题,应该是背包问题,同时要求均分可知,选出的物品数目也应该是背包费用的一个维度,因此这是一个多 ...

  4. php Mockery 错误 "call_user_func_array() expects parameter 1 to be a valid callback, class 'Mockery\Expectation' does not have a method"

    错误写法 $mock = Mockery::mock(MyClass::class) ->shouldReceive('foo') ->once() ->with($arg) -&g ...

  5. 关于Thinkphp5类命名导致的“模块不存在”问题

    不得不说,thinkphp5就是个十足的坑货, 在thinkphp3.2.3的基础上,函数.用法变了也就忍了, 在mac下写的一个类文件 GetRedisData.php,在mac+mamp环境下是正 ...

  6. Hadoop基础-MapReduce的数据倾斜解决方案

    Hadoop基础-MapReduce的数据倾斜解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据倾斜简介 1>.什么是数据倾斜 答:大量数据涌入到某一节点,导致 ...

  7. 安装R和Rstudio

    安装R和Rstudio 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.安装R编程语言 1.登录下载网站 https://cran.r-project.org/ 2.点击下载链 ...

  8. python删除列表元素remove,pop,del

    python删除列表元素 觉得有用的话,欢迎一起讨论相互学习~Follow Me remove 删除单个元素,删除首个符合条件的元素,按值删除,返回值为空 List_remove = [1, 2, 2 ...

  9. Mac安装WineHQ

    下载: (链接: https://pan.baidu.com/s/1o7NPhNk 密码: 5227) 安装: 先决条件: XQuartz>=2.7.7 系统设置允许未签名的包. 在https: ...

  10. javascript数组赋值操作

    最近在司徒正美的<javascript框架设计>,在里面发现了一个段代码 ...... var _len = arr1.length; while (_len) { arr2[--_len ...