HTML学习，常用常记（头部标签，添加CSS样式，图片，表格，列表）

最新推荐文章于 2022-12-08 21:03:39 发布

hhjian6666

最新推荐文章于 2022-12-08 21:03:39 发布

阅读量3.7k

点赞数

分类专栏： ***HTML + HTML5***Study***

本文链接：https://blog.csdn.net/qq_30796379/article/details/88200751

版权

***HTML + HTML5***Study*** 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜鸟教程(runoob.com)</title> 
    <base href="http://www.runoob.com/images/" target="_blank">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<style type="text/css">
    h1{
        color: red;
    }
</style>

<body>
    <img src="logo.png"> - 我们设置了图片的相对地址，能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
    <br><br>
    <a href="http://www.runoob.com">菜鸟教程</a> - 这个链接会在新窗口打开，即便它没有 target="_blank" 属性，因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>

添加在头部区域：<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>；

meta标签含义；<script>标签用于加载脚本文件，如： JavaScript；

<a href="http://www.runoob.com/" style="text-decoration:none;">没有下划线的链接</a>

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

<img border="0" src="./images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

img标签中src属性问题：

自己写的时候需要在最前面加上 . （点），代表当前路径，才能正确显示；
菜鸟教程上不可以加 . （点），加点则不能正确显示；

alt：可替换文本；

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

图片和同一行文本的相对位置（垂直方向）
图片和同一行文本的相对浮动位置（水平方向）
图片超链接
创建图片映射，创建带有可供点击区域的图像地图，每个区域都是一个超级链接

<h4>一列:</h4>
<table border="1">    
    <caption>Sinhaeng_Hhjian</caption>
    <tr>
        <td>100</td>
    </tr>
</table>

<h4>一行三列:</h4>
<table border="1">
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
</table>

<h4>两行三列:</h4>
<table border="1">
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
</table>
<!--表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。-->
<!--表格的表头使用 <th> 标签进行定义。-->

<h4>单元格跨两格:</h4>
<table border="1">
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>555 77 855</td>
    </tr>
</table>

表格中嵌套使用；

单元格边距：<table border="1" cellpadding="10">；

单元格间距：<table border="1" cellspacing="10">；

一个经典表格；

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h4>有序列表：</h4>
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<h4>自定义列表：</h4>
<dl>
	<dt>Coffee</dt>
		<dd>- black hot drink</dd>
	<dt>Milk</dt>
		<dd>- white cold drink</dd>
</dl>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等；

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

嵌套列表1；嵌套列表2；

<h4>罗马数字列表（混合编号）：</h4>
<ol type="I">
    <li>Apples</li>
    <li type="A" value=5>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

hhjian6666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习，常用常记（头部标签，添加CSS样式，图片，表格，列表）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫