1、HTML 标题(Heading)

  在<h1>  -- <h6> 标签进行定义,<h1>定义最大标题,<h6>定义最小的标题

  作用:标题会自动加粗,大写其中的内容,并且会自动换行

语法:

  1. <h1>标题1</h1>
  2. <h2>标题2</h2>
  3. <h3>标题3</h3>
  4. <h4>标题4</h4>
  5. <h5>标题5</h5>
  6. <h6>标题6</h6>

2、HTML 水平线

  <hr> 标签在HTML页面中创建水平线,

  作用:用于分隔内容,在视觉上将文档分隔成各个部分

语法:

  1. <p>这是一个段落。</p>
  2. <hr>
  3. <p>这是一个段落。</p>
  4. <hr>
  5. <p>这是一个段落。</p>

3、HTML 段落

  段落可以通过<p>标签定义,会自动换行

作用:将文档分隔为若干段落

语法:

  1. <p>段落1 会自动换行</p>
  2. <p>段落2 会自动换行 </p>
  3. <p>段落3 会自动换行</p>

4、HTML换行

  <br/>  标签定义一换行符,

  作用:在不产生一个新段落的情况下进行换行

  1. <p>这个<br> 段落<br>演示了分行的效果</p>

5、HTML 文本格式化

  5.1、文本加粗

    <b> ,<strong> 都可以实现加粗

    b 是bold 的缩写,仅仅表示改文本是粗体的,不暗示这段文字的重要性

    strong 也表示加粗,但是更多的是强调语义上的加重,提醒用户在文本上的重要性。在SEO(搜索引擎优化)的时候,也更容易帮助用户找到重点的内容

  语法: 

  1. <p>无粗体效果</p>
  2. <b>b标签粗体效果</b>
  3. <br/>
  4. <strong>strong标签粗体效果</strong>

  5.2、斜体

    <i> 和 <em>  都可以表示斜体效果

    i 是 italic 的缩写,仅仅表示文本是斜体的,并不暗示这段文字的重要性

    em 是 Emphasized 的缩写,虽然也是斜体,但是更多是强调语义上的加重,提醒用户该文本的重要性,常常用于引入新的术语的时候使用

  语法:

  1. <p>无斜体效果</p>
  2.  
  3. <i>使用 i 标签带来的斜体效果</i>
  4. <br/>
  5. <em>使用 em 标签带来的斜体效果</em>
  6.  
  7. <!--通过嵌套实现多种效果,嵌套即标签中有标签-->
  8. <br/>
  9. <strong><i>同时有粗体和斜体</i></strong>

  5.3、删除线

    <del>   delete 的缩写,删除标签

    使用一条线在文字中间穿过

  语法:

  1. <p>无删除效果</p>
  2. <del>使用del标签实现的删除效果</del>
  3. <br/>
  4. <s>使用s标签实现的删除效果,但是不建议使用,因为很多浏览器不支持s标签</s>

  5.4、下划线

    <ins>下划线标签,建议不用给普通文本加下划线,

  语法:

  1. <ins>使用ins标签实现的下划线效果</ins>
  2.  
  3. <br/>
  4.  
  5. <u>使用u标签实现的下划线效果,但是不建议使用</u>

  5.5、预格式

    <pre>  标签保留需要的文本格式,不会取消换行和空格,并且所示文本是等宽的

  语法:  

  1. <p>这里是没有用预格式的情况:</p>
  2.  
  3. public class HelloWorld {
  4. public static void main(String[] args) {
  5. System.out.println("Hello World");
  6. }
  7. }
  8. <br/>
  9. <br/>
  10.  
  11. <p>使用预格式的情况:</p>
  12.  
  13. <pre>
  14. public class HelloWorld {
  15.  
  16. public static void main(String[] args) {
  17. System.out.println("Hello World");
  18. }
  19. }
  20.  
  21. </pre>

  5.6、上标与下标

    <sub>标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的

    包含在 <sub> 标签和其结束标签 </sub> 中的内容会以正常内容的一半的高度显示在下方,而且通常较小,比如化学方程式

    <sup> 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的

    包含在 <sup> 标签和其结束标签 </sup> 中的内容会以正常内容的一半的高度显示在上方,而且通常较小,比如立方,开方

  语法:

  1. 数字显示 2<sub>3</sub> 32 的脚下
  2. <br>
  3. 数字显示 2<sup>3</sup> 32 的头上

  

HTML ------- 对文本进行操作的元素的更多相关文章

  1. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. JS-007-富文本域操作

    在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...

  4. 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  5. JS——操作内容、操作相关元素

    操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var ...

  6. jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性

    jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val() ...

  7. 选择、操作web元素

    11月1日 什么是web元素 Selenium自动化主要就是:选择界面元素,操作界面元素(输入操作:点击.输入文字.拖拽等,输出操作:获取元素的各种属性),根据界面上获取的数据进行分析和处理 选择元素 ...

  8. selenium常用命令--操作页面元素及获取元素内容整理

    selenium常用命令之操作页面元素及获取元素内容的事件整理 例子:  /**id <input type="text" id="phone" name ...

  9. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

随机推荐

  1. WEBAPI获取数据

    在大学学期期间学习的从mvc中的webapi中取数据 直接看代码 首先是控制器中的 using System; using System.Collections.Generic; using Syst ...

  2. python 提取整个 HTML 节点

    有的时候,需要把整个 HTML 节点原封不动地取下来,也就是包括节点标签.节点内容,甚至也包括内容中的空格.各种特殊符号等等. 假设已获取到页面源码,并将其保存在变量 src 中.则可有代码如下: f ...

  3. C#下的时间测试(用于计算方法执行时间)

    public class Timing { private TimeSpan m_StartTime; private TimeSpan duringTime; public Timing() //构 ...

  4. 实战Rest API接口测试

    一.Android App API接口测试 1.如何学好Android App API接口测试 postman可以用来实现API接口自动化测试,但是也有弊端,无法实现接口测试数据的参数化,为了达到接口 ...

  5. Python基础16

    反复练习决策树案例(保险) 将老师的思路与解题过程, 自己的心得, 中间遇到的问题.陷阱.解决办法, 写出来. 总之,将这个案例消化成自己的东西!

  6. Java获取客户端真实IP地址

    Java代码 import javax.servlet.http.HttpServletRequest; /** * 获取对象的IP地址等信息 */ public class IPUtil { /** ...

  7. element-ui Rate组件源码分析整理笔记(十三)

    Rate组件源码比较简单,有添加部分注释 main.vue <template> <!--valuenow当前的评分 valuetext当前显示的文本--> <div c ...

  8. Objective-C学习——中文URL编码和解码

    发现NSString类中有内置的方法可以实现.他们分别是: - (NSString *)stringByAddingPercentEscapesUsingEncoding:(NSStringEncod ...

  9. Struts2 运行流程

    Struts2运行流程 1.在web.xml中使用Struts的核心过滤器拦截所有请求. <filter> <filter-name>struts2</filter-na ...

  10. flink Periodic Watermarks 自定义周期性水印

    1.BoundedOutOfOrdernessGenerator /** * This generator generates watermarks assuming that elements ar ...