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. 一脸懵逼学习Hadoop分布式集群HA模式部署（七台机器跑集群）
			
    1)集群规划:主机名        IP      安装的软件                     运行的进程master    192.168.199.130   jdk.hadoop      ...
    
			
    2. 
						
  2. 学习笔记: 特性Attribute详解，应用封装
			
    /// /// 特性:中括号声明 /// /// 错觉:每一个特性都可以带来对应的功能 /// /// 实际上特性添加后,编译会在元素内部产生IL,但是我们是没办法直接使用的, /// 而且在meta ...
    
			
    3. 
						
  3. ASP.NET Core JWT认证授权介绍
			
    using JWTWebApi.Models; using Microsoft.AspNetCore.Authentication.JwtBearer; using Microsoft.AspNetC ...
    
			
    4. 
						
  4. C# 多线程下 静态类字段异常
			
    
			
    5. 
						
  5. [转]centos安装autossh
			
    centos安装autossh $ sudo yum install wget gcc make$ wget http://www.harding.motd.ca/autossh/autossh-1. ...
    
			
    6. 
						
  6. jQuery选择器总结   jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法
			
    新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...
    
			
    7. 
						
  7. node.js版本管理
			
    Node安装 Node的安装需要依赖很多,如gcc等,首先我们需要将这些安装成功,用rpm命令查看下,果然我们并没有gcc等,所以要用yum进行安装(基于centos6.9版本): yum -y in ...
    
			
    8. 
						
  8. ELK日志分析平台环境部署 （yum安装）
			
    前言:通常体质被分散存储在不同的设备上面,在庞大的服务器集群中,我们需要集中化的管理,日志的统计和检索,一般我们使用grep和awk,wc等linux命令虽然能够实现检索和统计,但是呢,对于要求更高的 ...
    
			
    9. 
						
  9. 排查Linux机器是否已被入侵
			
    来自--马哥Linux运维 1.入侵者可能会删除机器的日志信息 ,可以查看日志信息是否存在后者被清除 [root@zklf-server02 ~]# ll -h /var/log/ total 3.4 ...
    
			
    10. 
						
  10. 040 Http与RPC
			
    一直在说,但是没有系统的文档理解过. 1.本质 目前有很多Java的RPC框架,有基于Json的,有基于XML,也有基于二进制对象的. 他们最本质的区别,就是RPC主要是基于TCP/IP协议的,而HT ...
    
			
    11.