HTML ------- 对文本进行操作的元素
1、HTML 标题(Heading)
在<h1> -- <h6> 标签进行定义,<h1>定义最大标题,<h6>定义最小的标题
作用:标题会自动加粗,大写其中的内容,并且会自动换行
语法:
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2、HTML 水平线
<hr> 标签在HTML页面中创建水平线,
作用:用于分隔内容,在视觉上将文档分隔成各个部分
语法:
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
3、HTML 段落
段落可以通过<p>标签定义,会自动换行
作用:将文档分隔为若干段落
语法:
<p>段落1 会自动换行</p>
<p>段落2 会自动换行 </p>
<p>段落3 会自动换行</p>
4、HTML换行
<br/> 标签定义一换行符,
作用:在不产生一个新段落的情况下进行换行
<p>这个<br> 段落<br>演示了分行的效果</p>
5、HTML 文本格式化
5.1、文本加粗
<b> ,<strong> 都可以实现加粗
b 是bold 的缩写,仅仅表示改文本是粗体的,不暗示这段文字的重要性
strong 也表示加粗,但是更多的是强调语义上的加重,提醒用户在文本上的重要性。在SEO(搜索引擎优化)的时候,也更容易帮助用户找到重点的内容
语法:
<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>
5.2、斜体
<i> 和 <em> 都可以表示斜体效果
i 是 italic 的缩写,仅仅表示文本是斜体的,并不暗示这段文字的重要性
em 是 Emphasized 的缩写,虽然也是斜体,但是更多是强调语义上的加重,提醒用户该文本的重要性,常常用于引入新的术语的时候使用
语法:
<p>无斜体效果</p> <i>使用 i 标签带来的斜体效果</i>
<br/>
<em>使用 em 标签带来的斜体效果</em> <!--通过嵌套实现多种效果,嵌套即标签中有标签-->
<br/>
<strong><i>同时有粗体和斜体</i></strong>
5.3、删除线
<del> delete 的缩写,删除标签
使用一条线在文字中间穿过
语法:
<p>无删除效果</p>
<del>使用del标签实现的删除效果</del>
<br/>
<s>使用s标签实现的删除效果,但是不建议使用,因为很多浏览器不支持s标签</s>
5.4、下划线
<ins>下划线标签,建议不用给普通文本加下划线,
语法:
<ins>使用ins标签实现的下划线效果</ins> <br/> <u>使用u标签实现的下划线效果,但是不建议使用</u>
5.5、预格式
<pre> 标签保留需要的文本格式,不会取消换行和空格,并且所示文本是等宽的
语法:
<p>这里是没有用预格式的情况:</p>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
<br/>
<br/>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
5.6、上标与下标
<sub>标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的
包含在 <sub> 标签和其结束标签 </sub> 中的内容会以正常内容的一半的高度显示在下方,而且通常较小,比如化学方程式
<sup> 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的
包含在 <sup> 标签和其结束标签 </sup> 中的内容会以正常内容的一半的高度显示在上方,而且通常较小,比如立方,开方
语法:
数字显示 2<sub>3</sub> 3在2 的脚下
<br>
数字显示 2<sup>3</sup> 3在2 的头上
HTML ------- 对文本进行操作的元素的更多相关文章
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- JS-007-富文本域操作
在日常 web 编写过程中,富文本域几乎成为了一个网站不可页面元素,同时,其也有着各种各样的实现方式,网络上也存在着各种各样的集成插件可供引用.此文以 js 获取.修改 163 邮箱写邮件时的邮件内容 ...
- 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- JS——操作内容、操作相关元素
操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var ...
- jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性
jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val() ...
- 选择、操作web元素
11月1日 什么是web元素 Selenium自动化主要就是:选择界面元素,操作界面元素(输入操作:点击.输入文字.拖拽等,输出操作:获取元素的各种属性),根据界面上获取的数据进行分析和处理 选择元素 ...
- selenium常用命令--操作页面元素及获取元素内容整理
selenium常用命令之操作页面元素及获取元素内容的事件整理 例子: /**id <input type="text" id="phone" name ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
随机推荐
- 使用highcharts实现无其他信息纯趋势图实战实例
使用highcharts实现无其他信息纯趋势图实战实例 Highcharts去掉或者隐藏掉y轴的刻度线yAxis : { gridLineWidth: 0, labels:{ //enabled:fa ...
- nginx缓存页面后,串会话问题的解决方案
用的Nigix 后面挂了二个Tomcat是springMVC session存在Redis的项目 但是上线以后反应A用户添加数据,变成B用户的,网上查的方案如下: 解决方案,nginx提供prox ...
- 【新手篇】搭建DCN漏洞靶机及简单的SQL手工注入
很多新手小白入门后发现想要学好“网安”技术,除了掌握基础理论知识,更需要经常模拟不同的漏洞环境,但是如果使用外网服务器练习,会存在一定风险,因此能够搭建一个本地的模拟环境去测试漏洞将是一个不错的方案. ...
- maven 学习---Maven 插件
什么是 Maven 插件? Maven 实际上是一个依赖插件执行的框架,每个任务实际上是由插件完成.Maven 插件通常被用来: 创建 jar 文件 创建 war 文件 编译代码文件 代码单元测试 创 ...
- iOS深拷贝浅拷贝
浅拷贝:浅拷贝并不拷贝对象本身,只是对指向对象的指针进行拷贝深拷贝:直接拷贝对象到内存中一块区域,然后把新对象的指针指向这块内存 在iOS中并不是所有对象都支持Copy和MutableCopy,遵循N ...
- 【洛谷P4542】 [ZJOI2011]营救皮卡丘(费用流)
洛谷 题意: 给出\(n\)个点,\(m\)条边,现在有\(k,k\leq 10\)个人从\(0\)号点出发前往\(n\)点. 规定若某个人想要到达\(x\)点,则\(1\)~\(x-1\)号点都有人 ...
- idea快捷键的使用
IntelliJ IDEA 问题解决:1.乱码,主要是快捷键的字样显示乱码 中文字体显示乱码? 2.菜单项等的字体太小,怎么能设置下? -------------------------------- ...
- 跟着 Alex 学python 1.安装
声明 : 文档内容学习于 http://www.cnblogs.com/xiaozhiqi/ 参考文档: http://www.runoob.com/python/python-tutorial.ht ...
- jmeter引用jar包的3种方式
示例 实现对登录密码进行MD5加密 pom文件依赖 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --& ...
- 如何隐藏WooCommerce Shop Page页面的标题
有时我们不想显示WooCommerce Shop Page页面标题,如下图所示,需要如何操作呢?随ytkah一起来看看吧.在主题function.php文件中添加下面的代码就可以隐藏了 add_fil ...