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. SHELL打印两个日期之间的日期
			
    SHELL打印两个日期之间的日期 [root@umout shell]# cat date_to_date.sh THIS_PATH=$(cd `dirname $0`;) cd $THIS_PATH ...
    
			
    2. 
						
  2. MyBatis-Plus工具快速入门
			
    MyBatis-Plus官方文档:http://mp.baomidou.com/#/quick-starthttp://mp.baomidou.com/guide/#%E7%89%B9%E6%80%A ...
    
			
    3. 
						
  3. Git基础（三） 跟踪文件
			
    检查当前文件状态 git status 跟踪新文件 git add README 状态简览 git status -s 或 git status --short 忽略文件 创建一个名为.gitigno ...
    
			
    4. 
						
  4. 一脸懵逼学习Linux的Shell编程
			
    1:什么是Shell??? (1)Shell是用户与内核进行交互操作的一种接口,目前最流行的Shell称为bash Shell(2)Shell也是一门编程语言<解释型的编程语言>,即she ...
    
			
    5. 
						
  5. lua生成UUID
			
    百度云盘地址: https://pan.baidu.com/s/1zo__vSeDGaHOvCJLyzHwvA GitHub地址: https://github.com/bungle/lua-rest ...
    
			
    6. 
						
  6. ASP.NET Web Api 2 接口API文档美化之Swagger
			
    使用第三方提供的swgger ui 可有效提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 但本人在查阅大量资料并进行编码测试后,发现大部分的swagger实例并不能有效运行.例 ...
    
			
    7. 
						
  7. CentOS6—HAProxy安装与配置
			
    概述 Haproxy下载地址:http://pkgs.fedoraproject.org/repo/pkgs/haproxy/ 关闭SElinux.配置防火墙 1.vi /etc/selinux/co ...
    
			
    8. 
						
  8. CentOS6— Redis安装（转和延续）
			
    Part I. Redis安装(转载部分) 一.安装(官网地址 http://redis.io/download) wget http://download.redis.io/redis-stable ...
    
			
    9. 
						
  9. Spring boot+CXF开发WebService Demo
			
    最近工作中需要用到webservice,而且结合spring boot进行开发,参照了一些网上的资料,配置过程中出现的了一些问题,于是写了这篇博客,记录一下我这次spring boot+cxf开发的w ...
    
			
    10. 
						
  10. nginx 域名泛解析
			
    部分应用场景下要求服务器根据客户输入的二级域名地址自动访问不同的页面,比如一个服务器放置了不同的业务,商城.官网等多个业务,又不想一个个配置server, 网站目录结构入戏: html 网站根目录 m ...
    
			
    11.