HTML基础

programmer11123

已于 2022-07-03 14:22:06 修改

阅读量1.3k

点赞数

分类专栏： HTML+CSS基础文章标签： html

于 2022-03-20 20:32:54 首次发布

本文链接：https://blog.csdn.net/programmer11123/article/details/123620628

版权

HTML+CSS基础专栏收录该内容

3 篇文章

订阅专栏

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）
HTML 运行在浏览器上，由浏览器来解析。

1.HTML骨架

2.概念

HTML
HTML标签（开始/结束成对出现）
HTML元素:HTML 元素以开始标签起始,以结束标签终止
- 大多数 HTML 元素可拥有属性
- 大多数 HTML 元素可以嵌套
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
web浏览器：用于读取HTML文件，并将其作为网页显示

3.HTML基础

1.标签：

1. 标题: < h1>-< h6>

2. 段落：< p>—< p>

A：浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。

3. 链接 < a>

A： “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

B：HTML 链接 - target 属性：（打开方式：本页面/新页面）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

</body>
</html>

C：HTML 链接- id 属性：

可用于在当前页面链接到指定位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
  
<p>
<a href="#C4">查看章节 4</a>		<!--链接到标签C4-->
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>	<!--插入标签C4-->	
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>



</body>
</html>

D：创建图片等链接：

在标签a中href的值后面插入< img>标签后再关闭标签a

4. 图像< img>：

<img src=“___” width=XXX,height=XXX (闭合)

【src属性】：可以是绝对地址，也可以是基于< base>的相对地址

【alt属性】：它给出了图像的备选文本，供图像无法显示时采用。

图片文件src导入

1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、*.html 文件跟 *.jpg 图片在相同目录下：

<img src="*.jpg" width="300" height="120"/>

3、*.html 文件跟 *.jpg 图片在不同目录下：

a、图片 .jpg 在 image 文件夹中，.html 跟 image 在同一目录下：

<img src="image/*.jpg/"width="300" height="120"/>

b、图片 .jpg 在 image 文件夹中，.html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图片来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

图片对齐文本属性（align）：

默认（align=bottom）

align=“top/bottom/middle”

图片漂浮属性（style=“float:___”)：

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

创建图像映射：

即图像带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

shape值	描述描述	对应coords值
default	整片区域	无
rect	矩形区域	前两个对应左上角，后两个对应右下角
circle	圆形区域	前两个对应圆心，第三个对应半径
poly	多边形区域

标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">		//该图像可以引用name或id为planetmap的map

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

5. 表格< table >

建立：

每个表格从一个 table 标签开始。< table border=“1”>
行列框架：一行一行搭！

每个表格**行从< tr> (table row)**标签开始。每个表格的数据从

< td >(table data) 标签开始。
表头：

< th >为表头，可以改变排列顺序来实现水平标题和垂直标题
合并单元格：

【列合并(2格】：< th colspan=“2”>Telephone< /th>

【行合并(2格】：< th rowspan=“2”>Telephone< /th>

表内标签：

【嵌套表格】

注意标签的开关！

【列表】：

<td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>

设置单元格边距

< table border=“1” cellpadding=“10”>
设置单元格间距

< table border=“1” cellspacing=“0”>

----<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>两行三列:</h4>
<table border="1">		//border表示边框像素
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
  ------------------------------------------------------------
  
   <table border="1">
        <tr>
          <th>单价</th>		//th为表头，大多数浏览器会把表头显示为粗体居中															的文本：
          <th>数量</th>
          <th>总价</th>
        </tr>
        <tr>
            <td>50</td>
            <td>2</td>
            <td>100</td>
        </tr>
        </table>
</table>

</body>
</html>

6. 列表< ol> < ul>

实例练习：HTML：My 列表实例 | 菜鸟工具 (runoob.com)

< ul> : 无序列表 (Unorder List)

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

< ol> : 有序列表 (Order Lsit)

<h5>有序列表</h5>
<ol>
  <li>Coffee</li>			//有序无序都用list
  <li>Tea</li>
  <li>Milk</li>
</ol>

列表标签属性
- 有序列表：
1. start** ：规定有序列表起始序号
2. type:
  - 大写字母列表： < ol type=“A” > ---------< /ol>
  - 小写字母列表：< ol type=“a”>
    - 大写罗马数字列表：< ol type=“I”>//大写i
  - 小写罗马数字列表：< ol type=“i”>
- 无序列表（CSS实现）
  1. 圆点列表：
    
    < ul style=“list-style-type:disc”>
  2. 圆圈列表
    
    < ul style=“list-style-type:circle”>
  3. 正方形列表
    
    < ul style=“list-style-type:square”>
自定义列表

自定义列表以 < dl> 标签开始。

每个自定义列表项(list item)以 < dt> 开始。

每个自定义列表项的定义以 < dd> 开始。
```
<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
```
嵌套列表

不需要再另起< li>，直接< ul>和< ol>

7. 区块< div>

概要：HTML 可以通过 < div> 和 < span>将元素组合起来。
元素类型：
- HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: < h1>, < p>, < ul>, < table>
- HTML 内联元素
内联元素在显示时通常不会以新行开始。

实例: < b>, < td>, < a>, < img>
- HTML< div>元素
  1. 属于块级元素，是用于组合其他HTML元素的容器
  2. 如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
  3. < div> 元素的另一个常见的用途是文档布局。
    
    它取代了使用表格定义布局的老式方法。
    
    使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。
- HTML< span>元素
  1. HTML < span> 元素是内联元素，可用作文本的容器
  2. 当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。
< div>布局实例

参考链接：Div布局实例 | 菜鸟工具 (runoob.com)

8. 表单< form>

输入元素< input tpye=“____”>
1. text
2. password
3. submit
4. reset
其中
- < fieldset>为边框
- < lengend>为边框说明
- < textarea>为文本框(不限制输入字符数)

<form action="__网址___">		//action属性用于执行任务
  <fieldset style="__文本居中、尺寸等___" >		//制定边框
    <lengend>边框说明</lengend>
    账号<input type="text" name="账号"><br>
    密码<input type="password" name="密码"><br>
    
    <input type="submit" value="提交">
    <input type="reset"  value="重置">
    <input type="botton" value="这是一个按钮">
    
     <textarea rows="10" cols="50">简介：</textarea>
  </fieldset> 
  
</form>

选择按钮

单选：(radio)

【ps】：单选的name值要相同才能实现单选！！

<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

多选：（checkbox）

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

【ps】：默认勾选方法：加上 checked=“checked”

预选下拉列表（select）

        <form>
            <select name="major">
                <option value="人工智能" hidden>人工智能</option>
                <option value="大数据" disabled>大数据</option>
                <option value="软件工程"selected>软件工程</option>
                <option value="计算机">计算机</option>
            </select>
        </form>

其中：

hidden：隐藏选项
disabled：不可选
selected：默认选择

9. 框架< iframe>

1. 功能：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

2.iframe语法:

< iframe src=“URL” name=“___”>< /iframe>

该URL指向不同的网页。

配合链接在框架中打开

< a=“URL” target=“iframe_name”>

10.脚本< script>

< script> 标签用于定义客户端脚本，比如 JavaScript。
< script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

0. 空元素标签

换行**：
(尽量使用
水平线：

2.属性：

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

实例:

<a href="http://www.runoob.com">这是一个链接</a>

Tips:

属性和属性值，尽量小写，本来这样做也方便些。
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

3.注释：

格式：

4. 文本格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

PS：通常标签替换加粗标签来使用, 替换 标签使用。

strong代表强调，你可以自定义任何样式来代表强调。只是strong的默认样式与b相同而已。em与i同理。

5. 字符实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

如需显示小于号，我们必须这样写：& lt; 或 < 或 <
不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格(& nbsp;)。

浏览器总是会截短 HTML 页面中的空格。

如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。

如需在页面中增加空格的数量，您需要使用字符实体。

【PS】详见：HTML ISO-8859-1 参考手册 | 菜鸟教程 (runoob.com)

4.头部

###1. 元素

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

###2.元素

3.元素

base元素可以用来设置一个基准URL，HTML文档中的相对链接就可以在此基础上进行解析。
base元素有2个属性：

href：设置基准URL

target: 设置链接在用户点击时的代开方式

4. 元素

标签定义了文档与外部资源之间的关系。
标签通常用于链接到样式表:

5.

```

6.HTML < meta> 元素

meta标签描述了一些基本的元数据。
< meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
< meta> 一般放置于 < head> 区域
< meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

7. HTML < script> 元素

5.CSS

为更好渲染HTML元素，在HTML 4后开始使用CSS（层叠样式表）

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

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用

1.内联样式

样式分为”内联“和“外引”两种方式

1.背景颜色

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

2.字体, 字体颜色，字体大小

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。

3.文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

4. 内联的全局和局部样式设定

 <style type="text/css">
        h1.intro             
        {
            color: aqua;
        }                                                       
        p.important                                             
        {
            color:green;                                          
        }                                                 <!--局部样式-->
        body {background-color:rgb(152, 203, 226)}
        p {color:rgb(255, 255, 255)}                      <!--全局样式-->
    </style>

2.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>