【html学习笔记】2.基本元素

  • 开发
  • 29

1.标题

  • 标题会自动粗体其中大写的内容，并带有换行的效果
  • 会使用<h1>到<h6>表示不同大小的标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题5</h6>

在这里插入图片描述

2.段落

<p>标签表示段落。是paragraph的缩写。段落会自动换行。

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

在这里插入图片描述

3.粗体

<b><strong>都可以将文本加粗
<b>表示仅将文本内容加粗，不包括任何语句含义
<strong>包括语义着重强调的意思
更推荐使用<strong>

<b>b标签粗体效果</b>
</br>
<strong>strong标签粗体效果</strong>

在这里插入图片描述

4.斜体

<i>和<em>都能够表示斜体的效果
<i>仅将文本斜体，不包含任何语义内容
<em>表示也将文本的内容斜体，包含语义上的强调

<p>无斜体效果</p>
<i>使用 i 标签带来的斜体效果</i>
<br/> 
<em>使用 em 标签带来的斜体效果</em>

在这里插入图片描述

5.嵌套标签

嵌套标签是标签里还有标签的一种书写形式（可以同时实现多种效果）
例子：同时具有粗体和斜体

<p>普通</p>
</br>
<b>加粗</b>
</br>
<i>斜体</i>
</br>
<b><i>加粗加斜体</i></b>

在这里插入图片描述

6.预格式

有些时候需要在网页上显示代码，这个时候就需要用到预格式

<p>这里是没有用预格式的情况：</p>

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World");
	}
}
<br/>
<p>使用预格式的情况:</p>

<pre>
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World");
	}
}
</pre>

在这里插入图片描述

7.删除线

在HTML语言中，删除线可以用标签<del>``````<s>表示
<del>是delete的缩写。表示删除
<s>也可以表示删除。但不建议使用，因为某些浏览器可能会不支持。

<p>这是一个普通文本</p>
<br>
<del>这是一个用del的文本</del>
</br>
<s>这是一个用s的文本</s>

在这里插入图片描述

8.下划线

<ins>是下划线标签。
<u>也是下划线标签，但是不建议使用。

<ins>使用ins标签实现的下划线效果</ins>
</br>
<u>使用u标签实现的下划线效果</u>

在这里插入图片描述

9.图象

9.1 显示图像

语法：<ing src = "">

<img src="picture.jpg"/>

在这里插入图片描述

9.2 同级目录下图象

见 9.1 只要在同一个包中即可

9.3 上级目录下图象

在连接前面加…/
<ing src = ../>

<img src="../picture.jpg"/>

在这里插入图片描述

9.4 其他目录下图象

使用图片的绝对路径，在图像前面加上file://

<img src="file://d:/picture.jpg"/>

9.5 设置图像大小

<img width= "200" height = "200" src = ""/ >

在这里插入图片描述

9.6 设置图象位置

图像是不能自己居中的，要放在能够设置居中属性的代码块里。
常用的代码块是<div>

<div align = "left">
   <img width= "200" height = "200" src="../picture.jpg"/ >
</div>

<div align = "center">
   <img width= "200" height = "200" src="../picture.jpg"/ >
</div>

<div align = "right">
   <img width= "200" height = "200" src="../picture.jpg"/ >
</div>

在这里插入图片描述

9.7 设置图片文字

如果图片不显示，可以使用alt属性显示关于图片的描述性文字

<div align = "left">
   <img width= "200" height = "200" src="d:/pic.jpg"/ alt = "图片" >
</div>

在这里插入图片描述

10.超链接

超链接使用标签<a>来表示
完整的语法是<a href="跳转到的页面地址">超链显示文本</a>

10.1 超链接

<a href="https://www.baidu.com/">百度</a>

在这里插入图片描述

10.2 跳转新的页面

如果想要在新的页面里打开超链接，需要再标签里再添加一个属性

<a href="https://www.baidu.com/" target="_blank">百度</a>

关于HTML中的target=“_blank“问题

10.3 跳转提示文字

想要在鼠标放上的时候弹出提示框，需要添加属性title

<a href="https://www.baidu.com/"  target="_blank" title="跳转到百度">百度</a>

在这里插入图片描述

10.4 用图片作为超链接

需要<a><img>两种标签结合起来使用

<a href="https://www.baidu.com/"  target="_blank" title="跳转到百度">
<img src = "../picture.jpg">
</a>

11.表格

<table>标签用于表示一个表格
<tr>(table row)的缩写，表示行
<td>(table data)的缩写，表示列

11.1 一个三行两列的表格

  <table>
         <tr>
			<td>1</td>
			<td>2</td>
         </tr>

         <tr>
			<td>3</td>
			<td>4</td>
         </tr>

         <tr>
			<td>5</td>
			<td>6</td>
         </tr>
         
    </table>

在这里插入图片描述

11.2 带边框的表格

在<table>里添加属性border

    <table border = "1">

在这里插入图片描述

11.3 设置table的宽度

设置table的宽度，需要添加一个新的属性width
在这里插入图片描述

11.4 设置单元格宽度绝对值

在<td>里设置标签属性width。
之后几行的width会受到第一行的影响。

  <table border = "1" width = "200px"> 
         <tr>
	<td width = "20px">1</td>
	<td>2</td>
         </tr>

         <tr>
	<td>3</td>
	<td>4</td>
         </tr>

         <tr>
	<td>5</td>
	<td>6</td>
         </tr>

    </table>

在这里插入图片描述

11.5 设置单元格宽度的相对值

相对值和绝对值有所区别。在于width属性可以设置为百分数

<table border = "1" width = "200px"> 
         <tr>
	<td width = "80%">1</td>
	<td>2</td>
         </tr>

         <tr>
	<td>3</td>
	<td>4</td>
         </tr>

         <tr>
	<td>5</td>
	<td>6</td>
         </tr>

    </table>

在这里插入图片描述

11.6 单元格水平对齐

设置<td>的属性align：

align= "center"
align = "left"
align = "right"

<html>
 <body>
    <table border = "1" width = "200px"> 
         <tr>
	<td width = "80%" align = "left">1</td>
	<td>2</td>
         </tr>

         <tr>
	<td align = "center">3</td>
	<td>4</td>
         </tr>

         <tr>
	<td align = "right">5</td>
	<td>6</td>
         </tr>

    </table>
 </body>
 
</html>

在这里插入图片描述

11.7 单元格垂直对齐

使用<valign>属性标签来控制内容在表格里的显示位置

    <table border = "1" width = "200px"> 
         <tr>
	<td width = "50%" valign = "top">1</td>
	<td>
	        2<br/>
	        2<br/>		
	</td>
         </tr>

         <tr>
	<td valign = "middle">3</td>
	<td>
	        4<br/>
	        4<br/>		
	</td>
         </tr>

         <tr>
	<td valign = "bottom">5</td>
	<td>
	        6<br/>
	        6<br/>		
	</td>
         </tr>
         
    </table>

在这里插入图片描述

11.8 设置横向合并的表格

设置<td>的属性colspan

    <table border = "1" width = "200px"> 
         <tr>
	<td colspan = "2">1，2</td>
         </tr>

         <tr>
	<td valign = "middle">3</td>
	<td>
	        4<br/>	
	</td>
         </tr>

         <tr>
	<td valign = "bottom">5</td>
	<td>
	        6<br/>		
	</td>
         </tr>
         
    </table>

11.9 设置竖向合并的表格

设置<td>的属性rowspan

    <table border = "1" width = "200px"> 
         <tr>
	<td rowspan="2">1,3</td>
	<td>2</td>
         </tr>

         <tr>
	<td>4</td>
         </tr>

         <tr>
	<td>5</td>
	<td>6</td>
         </tr>
         </tr>

    </table>

在这里插入图片描述

11.10 设置背景颜色

<tr><td>都可以设置背景颜色

 <body>
    <table border = "1" width = "200px"> 
         <tr bgcolor = "pink">
	<td>1</td>
	<td>2</td>
         </tr>

         <tr>
	<td  bgcolor = "yellow">3</td>
	<td>4</td>
         </tr>

         <tr>
	<td>5</td>
	<td>6</td>
         </tr>
         </tr>

    </table>
 </body>

在这里插入图片描述

12 列表

列表分为有序列表和无序列表。
分别使用标签<ul><ol>表示

  • 无序
    <ul>
      <li>aaa</li>
      <li>bbb</li>
    </ul>
  • 有序
    <ol>
      <li>aaa</li>
      <li>bbb</li>
    </ol>

13 块

在HTML中，块有<div><span>两种
这两种标签都是布局用的，单独使用没有任何效果
需要和css样式联系在一起进行使用。
在这里插入图片描述
一个例子
如果需要同时对两个图片进行控制的话，可以使用div块进行同时控制

<html>
  <body>
    <div style="margin-left:300px"> 
        <img src = "../picture.jpg">
         <br/>
         <img src = "../picture.jpg">        
    </div>
  </body> 
</html>

在这里插入图片描述

<div>和<span>区别

是可以自动换行的， 是不可以自动换行的。 ```
第一个div 
<div>
    第二个div     
</div>

<div>
    第一个div     
</div>

<span>
    第一个span     
</span>

<span>
    第二个span     
</span>
```

在这里插入图片描述

14.字体

在HTML中，字体是用<font>标签来表示的
<font>的常用属性有color 、size ，表示颜色和大小。

14.1 字体元素

<html>
  <body>
       <font color = "green">普通-绿色 字体<font>
       <br/>
       <font color = "red" size = "+2">增大二倍-红色 字体<font>
        <br/>
       <font color = "blue" size = "-2">缩小二倍-蓝色 字体<font>
  </body> 
</html>

在这里插入图片描述

14.2 颜色在HTML里的表示方式

颜色在HTML里的表示方式有两种。

  1. 直接使用英文名字
  2. 使用16进制
<html>
  <body>
       <font color = "green">绿色 字体<font>
       <br/>
       <font color = "#7FFF00">绿色 字体<font>
  </body> 
</html>

在这里插入图片描述

15 使用内联框架

内联框架指的是在页面中又嵌套了一个页面。
使用标签<iframe>表示

<html>
  <body>
       <iframe  src="https://cn.bing.com/"  width="400" height="300">
</iframe>
  </body> 
</html>

在这里插入图片描述

阅读全部

相关推荐

  2. html 基础学习笔记

    2024-02-17 06:06:03       30 阅读

  4. html元素基本使用

    2024-02-17 06:06:03       21 阅读

  6. 前端学习|HTML基础笔记

    2024-02-17 06:06:03       20 阅读

  9. HTML 基本元素是什么？

    2024-02-17 06:06:03       37 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-02-17 06:06:03       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-02-17 06:06:03       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-02-17 06:06:03       18 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-02-17 06:06:03       20 阅读

热门阅读

  8. OpenAI 生成视频模型 Sora 论文翻译

    2024-02-17 06:06:03       30 阅读

  11. uniapp如何给视频组件设置图片

    2024-02-17 06:06:03       30 阅读

  15. ubantu 新建.sh 文件

    2024-02-17 06:06:03       30 阅读

  16. STM32-寄存器和HAL库以及如何使用

    2024-02-17 06:06:03       26 阅读

  17. react中如何做到中断diff过程和恢复

    2024-02-17 06:06:03       28 阅读

  19. Vue3 中应该使用 Ref 还是 Reactive？

    2024-02-17 06:06:03       33 阅读

  20. 【VTKExamples::PolyData】第二十八期 LinearExtrusion

    2024-02-17 06:06:03       23 阅读

  21. 【退役之重学前端】使用vite+vue3+vue-router，重构react+react-router前后端分离的商城后台管理系统

    2024-02-17 06:06:03       24 阅读