HTML学习（基本元素）

最新推荐文章于 2023-04-05 16:42:13 发布

CodeGuN

最新推荐文章于 2023-04-05 16:42:13 发布

阅读量278

点赞数

分类专栏：前端语言学习

本文链接：https://blog.csdn.net/weixin_43871956/article/details/90743088

版权

前端语言学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

二、基本元素
1、阶段性练习
实现此张图的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>英雄联盟(电子竞技类游戏)</h1>
    <!--strong 粗体 i斜体 u下划线 del删除线-->
    <p><strong>《英雄联盟》</strong>(简称LOL)是由美国<i>Riot Games</i>开发，中国大陆地区由腾讯游戏运营的网络游戏。</p>
    <p><strong>《英雄联盟》</strong>除了即时战略、团队作战外，还拥有一百多位特色各异的英雄、丰富的地图及玩法、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。<u>[1]</u></p>
    <p>2016年1月，根据官方数据显示，LOL全球最高同时在线已突破<del>750</del>900万，全球日活跃高达2700万，全球月活跃已达6700万，注册用户亿计，LOL已经成为当今世界最具人气和影响力的网络游戏之一。<u>[2]</u></p>

2、标题

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

3、段落

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

4、粗体

<b> 
<strong> 
都可以用来实现粗体的效果

区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong

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

5、斜体

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

区别：
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。

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

6、预格式

有时候需要在网页上展示代码，例如java代码
就需要用到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>

6、删除效果

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

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

7、下滑线

<ins>为下划线标签

<ins>使用ins标签实现的下划线效果</ins> 
<br/>
<u>使用u标签实现的下划线效果，但是不建议使用</u>

8、图像

<img src="图片地址"/>

调整大小

<img width ="200" height="200" src="图片地址"/>

或者

<div align="left">
  <img src="图片地址"/>
</div>
 
<div align="center">
  <img src="图片地址"/>
</div>
 
<div align="right">
  <img src="图片地址"/>
</div>

9、超链

<a>标签用来显示超链
<a href="跳转到的页面地址">超链显示文本</a>
例如：
<a href="http://www.12306.com">12306</a>

在新的页面打开超链

<a href="http://www.12306.com" target="_blank">12306</a>

在超链上显示文字
当鼠标放在超链上的时候，就会弹出提示文字

<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

使用图片作为超链

<a href="http://www.12306.com">
<img src="图片地址"/>
</a>

10、表格

<table>标签用于显示一个表格 
<tr> 表示行 
<td> 表示列又叫单元格

示例 1 : 3行2列表格
tr(table row)表示行，所有3个tr元素
td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 2 : 带边框的表格
设置table的属性border

<table border="1">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 3 : 设置table宽度
设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素

<table border="1" width="200px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 4 : 单元格宽度绝对值
设置td的属性width
在示例里，1单元格设置了宽度，那么3，和a单元格，自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定

<table border="1" width="200px">
  <tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 5 : 单元格宽度相对值
设置td的属性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>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 6 : 单元格水平对齐
设置td的属性align

<table border="1" width="200px">
  <tr>
      <td width="50%" align="left">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td align="center">3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td align="right">a</td>
      <td>b</td>
  </tr>
 
</table>

示例 7 : 单元格垂直对齐
设置td的属性valign

<table border="1" width="200px">
  <tr>
      <td width="50%" valign="top" >1</td>
      <td>
             2   <br/>
             2   <br/>
             2   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="middle"  >3</td>
      <td>
             4   <br/>
             4   <br/>
             4   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="bottom" >a</td>
      <td>
             b   <br/>
             b   <br/>
             b   <br/>
      </td>
  </tr>
 
</table>

示例 8 : 横跨两列, 水平合并
设置td的属性colspan

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

示例 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>a</td>
      <td>b</td>
  </tr>
 
</table>

示例 10 : 背景色
设置tr或者td的属性bgcolor

<table border="1" width="200px">
  <tr bgcolor="gray">
      <td width="50%">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td  bgcolor="pink">b</td>
  </tr>
 
</table>

11、表
无序列表

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

有序列表

<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

12、块 div span

这两种标签都是布局用的这种标签本身没有任何显示效果通常是用来结合css进行页面布局

区别
div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong

<div>
 第一个div
</div>
 
<div>
 第二个div
</div>
 
<span>
 第一个span
</span>
 
<span>
 第二个span
</span>

13、字体
使用标签表示字体
字体元素
font常用的属性有 color和size, 分别表示颜色和大小

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

14、内联框架

<iframe> 即内联框架

通过内联框架可以实现在网页中“插入”网页
iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页

<iframe src="http://www.baidu.com/" width="600px" height="400px">
</iframe>

CodeGuN

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（基本元素）

二、基本元素1、阶段性练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1>英雄联盟(电子竞技类游戏)&l...
复制链接

扫一扫