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. OpenAuth.Net.landv分支之旅开始制作CRM系统
			
    OpenAuth.Net.landv分支之旅开始制作CRM系统 这个事件的由来是因为没有一个统一的会员卡平台系统,目前需要连接三家酒店会员系统,由于三家酒店使用了三种酒店管理系统,彼此之间的耦合低.三 ...
    
			
    2. 
						
  2. Nginx 提示host not found in upstream 错误解决方法
			
      Nginx DNS resolver配置实例,本文讲解在proxy_pass 和 upstream server 通信的时候需要手动指定 resolver,本文就给出了配置实例. nginx 通过 ...
    
			
    3. 
						
  3. 实现虚拟机VMware上Centos操作系统与主机windows之间互相复制与粘贴
			
    1.启动你的虚拟机,然后点击虚拟机,如下所示(未安装的话,显示的是安装VMware Tools): 2.点击安装Vmware tools以后显示如下所示: 3.VMwareTools-9.9.2-24 ...
    
			
    4. 
						
  4. C#学习-字段
			
    字段的定义由3部分组成,访问修饰符.字段的类型和字段的名称.以下是 public class Person { //姓名,类型为字符串类型 private string name; //年龄,类型为i ...
    
			
    5. 
						
  5. HTTP max-age与Expires的分别
			
    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...
    
			
    6. 
						
  6. ipython启动 自动导入模块 自动%logstart
			
    1. 参考 启动ipython或python解释器自动导入组件(例如:numpy) http://ipython.org/ipython-doc/stable/config/intro.html#se ...
    
			
    7. 
						
  7. Codeforces 875F Royal Questions (看题解)
			
    我还以为是什么板子题呢... 我们把儿子当做点, 公主当做边, 然后就是求边权值最大基环树森林. #include<bits/stdc++.h> #define LL long long  ...
    
			
    8. 
						
  8. HDFS常用API（2）
			
    一.读取HDFS文件数据.将本地文件写入HDFS中文件.使用IOUtils读写数据 ** * @author: PrincessHug * @date: 2019/3/18, 17:24 * @Blo ...
    
			
    9. 
						
  9. SVM：SVM之Classification根据已有大量数据集案例，输入已有病例的特征向量实现乳腺癌诊断高准确率预测—Jason niu
			
    load BreastTissue_data.mat n = randperm(size(matrix,1)); train_matrix = matrix(n(1:80),:); train_lab ...
    
			
    10. 
						
  10. 四、Python导入自己写的包报错：没有该包如何解决
			
    场景:当你运行文件时,提示没有你想要导入的这个包,这是只需在你运行文件的开头添加俩行代码: import sys sys.path.apprnd('../') 原理:请看图解 另外解释下sys.pat ...
    
			
    11.