HTML:超文本标记语言基本结构

<!DOCTYPE html>  <!--文档的声明 一个HTML文件就是一个文档  -->

<html lang="en"> <!-- -->

<head> <!--head 中的内容不会显示在浏览器上 双别和标签-->

    <meta charset="UTF-8"> <!-- 定义文档的编码类型  单闭合标签-->

    <title>Title</title> <!-- 显示标题-->

</head>

<body> <!--body中的内容都会显示到浏览器中 -->

</body>

</html>

body中标签的分类

行内标签

在一行内显示,不换行,不能设置宽高,默认是内容的宽高

span:标签被用来组合文档中的行内元素

 <span>hello</span>

a:超链接

<!--a:超链接,行内标签 -blank:在空白页面打开网页 title:鼠标悬浮显示-->

<a href="https://www.baidu.com/" target="_blank" title="跳转百度">跳转百度</a>

em或i:斜体标签

<body>

<em>hello</em>
<i>hello</i>

</body>

b或strong:粗体标签

<body>

<b>hello</b>

<strong>hello</strong>

</body>

u:下划线标签

<body>

<u>hello</u>

</body>

sup上标文本和sub下标文本

<body>

<sup>hello</sup>

<sub>hello</sub>

</body>

br:换行标签

<body>

<br>

</body>

hr:水平线标签

<body>

<hr>

</body>

center:居中标签

<body>

<center>hello</center>

</body>

块级标签

独占一行,可以设置宽高,如果不设置宽高,默认是内容的宽高

h1~h6: 块级标签:独占一行

<body>

<!--h1 只允许页面中只有一个,为了seo和爬虫-->

<h1>hello</h1>

<h2>hello</h2>

<h3>hello</h3>

<h4>hello</h4>

<h5>hello</h5>

<h6>hello</h6>

</body>

div:分割页面

<body>

<!--id在文档中是唯一的,为div添加标识-->

<div id="top">

    <!--class可以重复,为div添加标识-->

    <div class="top-l">

        <!--span:是行内标签,一行内显示-->

        <span>hello</span>

        <!--a:超链接,行内标签 -blank:在空白页面打开网页 title:鼠标悬浮显示-->

        <a href="https://www.baidu.com/" target="_blank" title="跳转百度">跳转百度</a>

        <!--img:引入图片-->

        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3234070121,1596383226&fm=11&gp=0.jpg" alt="图片加载失败的文本">

        <!--取消a标签的自动跳转-->

        <a href="javascript:void(0)">hello</a>

    </div>

</div>

</body>

P:换行,只能放 字体标签和img 表单 imput,不能放块

<p>hello</p>

<p>hello</p>

ul:无序列表,它的子元素自能是li标签

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

ol:有序列表

<ol>

    <li></li>

    <li></li>

    <li></li>

</ol>

dl:自定义列表

<ol>

    <li></li>

    <li></li>

    <li></li>

</ol>

table

<table border="1" style="border-collapse: collapse">

    <tr>

        <td>name</td>

        <td>age</td>

    </tr>

    <tr>

        <td>wl</td>

        <td>18</td>

    </tr>

</table>

解决a标签不能设置宽高的问题

style="display: block"

  <a href="">

            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3234070121,1596383226&fm=11&gp=0.jpg"

                 alt="" style="display: block ;height: 100px ;width: 100px" >

  </a>


　　
												


											
HTML 标题标签的更多相关文章
	

    
						
  1. 我给女朋友讲编程html系列(2) --Html标题标签h1
		
    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...
    
		
    2. 
						
  2. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6
		
    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...
    
		
    3. 
						
  3. HTML之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）
		
    一.HTML标签 所谓的HTML的标签就是发明者认为定义好的一些单词,就相当于我们汉语中的字 二.HTML的语法 语法就是用来定义这些“字”应该如何解析或者书写的规则 三.常见标签及基本语法 1.人为 ...
    
		
    4. 
						
  4. [19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)
		
    一.C/S与B/S的区别 C/S(Client/Server):客户端/服务器 1)一般使用的软件都是C/S架构,比如QQ.360.office365: 2)C表示客户端,用户通过客户端来使用软件:S ...
    
		
    5. 
						
  5. 【HTML】学习路径3-段落标签和标题标签
		
    第一章:标题标签 <h1>  </h1> <h2>  </h2> 等等... 数字越大,字体尺寸越小. <!--标题会加粗.独占一行-->  ...
    
		
    6. 
								
  6. html基础-标题标签-文字标签（2）
		
    昨天说道了我的第一个网页,今天接着继续带大家深入,前期学习千万不要用代码工具哦!那样就少了深入了解的机会了哦! 一.大家都知道文章会有各种标题,网页其实也跟文章差不多也有专门来写标题的元素. (1). ...
    
		
    7. 
						
  7. 在文章详情页调用seo标题标签
		
    在新闻的详情页,调用当前栏目的seo标题,原标签是:{dede:field.seotitle /} {dede:type} [field:seotitle/] {/dede:type} 修改 \inc ...
    
		
    8. 
						
  8. <h1>~<h6> 标题标签
		
    <h1>~</h6>标题系列标签 解释:h1到h6 中h1标签最大,h6标签最小,逐一递增. 例如: <h1>标签</h1> <h2>标签& ...
    
		
    9. 
						
  9. HTML头信息标签和标题标签
		
    <html> <!-- 头信息的作用 1. 可以设置网页的标题. 2. 可以通知浏览使用指定的码表解释html页面. --> <head> <meta htt ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SVN_2008R2 搭建流程与规范
			
    Svn服务在win2008 搭建 1:svn服务的原理与架构 1.Svn服务可以理解为加强版的ftp文件服务器, svn采用HTTP协议的方式进行文件传输 2.服务端安装好后,普通用户也需要下载一个c ...
    
			
    2. 
						
  2. spark操作Kudu之写 - 使用DataFrame API
			
    在通过DataFrame API编写时,目前只支持一种模式“append”.尚未实现的“覆盖”模式 import org.apache.kudu.spark.kudu._ import org.apa ...
    
			
    3. 
						
  3. Jenkins.war包构建Jenkins平台
			
    [root@jenkins ~]# wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo [roo ...
    
			
    4. 
						
  4. 解决centos中vsftpd中文乱码
			
    系统环境 [root@augusite yum.repos.d]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 软件版本  ...
    
			
    5. 
						
  5. aop日志记录
			
    1.自定义 package cc.mrbird.common.annotation; import java.lang.annotation.ElementType; import java.lang ...
    
			
    6. 
						
  6. F. Shovels Shop   背包DP
			
    题意: 商店里有n把铲子 每个铲子有其标价 一个人要买k吧 有m个优惠政策 每个优惠政策有两个元素x,y 表示   正好买x个铲子的时候  这x个铲子中最便宜的y个铲子免单 求用最少的前买到k个铲子  ...
    
			
    7. 
						
  7. 2013年蓝桥杯省赛C/C++A组真题解析
			
    1.高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的 ...
    
			
    8. 
						
  8. 用yield写协程实现生产者消费者
			
    思路: yield可以使得函数阻塞,next,和send可以解阻塞,实现数据不竞争的生产者消费者模式 代码: import random #随机数,模拟生产者的制造物 def eat(): #消费者  ...
    
			
    9. 
						
  9. Java 之 CSS
			
    1.CSS a.定义:CSS 指层叠样式表 b.意义:为了解决内容与表现分离的问题 c.特点:多个样式可层叠为一 2.用法: a.行内样式:style <span style="col ...
    
			
    10. 
						
  10. POJ 3237 Tree 【树链剖分】+【线段树】
			
    <题目链接> 题目大意: 给定一棵树,该树带有边权,现在对该树进行三种操作: 一:改变指定编号边的边权: 二:对树上指定路径的边权全部取反: 三:查询树上指定路径的最大边权值. 解题分析: ...
    
			
    11.