HTML（Hyper Text Markup Language）超文本标记语言基础学习

不想qiao代码

已于 2022-05-09 16:16:11 修改

阅读量667

点赞数

文章标签： html 学习

于 2021-08-06 22:02:42 首次发布

本文链接：https://blog.csdn.net/m0_47794838/article/details/119455840

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

注意：在中文网页中需要使用<meta charset="utf-8">,否则会出现乱码；有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
在这里插入图片描述
HTML链接通过标签<a>
去掉下划线用style="text-decoration:none;">
使用 target 属性，你可以定义被链接的文档在何处显示。
_blank在新的窗口打开
_top在当前页面打开

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

HTML图像通过标签<img>
alt 属性用来为图像定义一串预备的可替换的文本。(在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。)
style="float:left"用来表示图像浮动的位置。

<img src="/images/logo.png" alt="Logo rock" width="258" height="79" style="float:left" />

创建图像映射（点击图片中的某个东西可以跳转出另一个图片）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><!--矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))-->
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><!-- 圆形：(圆心坐标为(X1,y1)，半径为r)-->
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
  <!--如果是多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
    <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>-->
</map>
</body>
</html>

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

HTML标题标签有<h1>是最大的标签~<h6>最小的标签双标签
HTML水平线标签<hr/>单标签
HTML注释用 
HTML段落标签<p>

<p>这是一个段落 </p>
<p>这是另一个段落</p>

HTML换行标签<br/>

HTML文本格式化标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>

在这里插入图片描述

<b>标签和<strong>标签效果一样都是加粗
<i>标签和<em>标签效果一样都是斜体

HTML的<pre>标签对空行和空格可以进行控制，在此标签内，可以按照你写的格式直接进行相同的输出，不会省略空行或者空格！！

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

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

</body>
</html>

在这里插入图片描述
HTML “计算机输出” 标签引文, 引用, 及标签定义
标签描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

HTML <base>元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系，标签通常用于链接到样式表:

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

HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

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

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

2.为网页定义描述内容:

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

3.定义网页作者:

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

4.每30秒钟刷新当前页面:

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

CSS 可以通过以下方式添加到HTML中:
1.内联样式- 在HTML元素中使用"style" 属性
eg:<p style="color:blue;margin-left:20px;">这是一个段落。</p>改变段落的颜色和左外边距;
font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式; text-align（文字对齐）属性指定文本的水平与垂直对齐方式;
2.内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
eg:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3.外部引用 - 使用外部 CSS 文件
eg:

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

最好的方式是通过外部引用CSS文件.

HTML表格
HTML表格用<table> </table>标签来表示，其中<tr> </tr>表示一行，<td> </td>表示一列。在<table border="1">border表示表格的边框，如果不定义则不会显示边框。表格的表头使用 <th> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本：

<table border="1" cellspacing="0" cellpadding="5"><!--cellspacing="0"表示单元格间距为0，cellpadding="5"表示单元格边距为5-->
<caption>水平标题:</caption><!--caption表示该表格的标题-->
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th><!-- colspan="2"表示跨两列，rowspan="2"表示跨两行-->
</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>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

HTML列表
1.无序列表用<ul> </ul>可嵌套使用

<h4>圆点列表：</h4>
<ul style="list-style-type:disc"><!--style="list-style-type:circle表示前面是圆圈；square表示前面是正方形的符号-->
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

2.有序列表<ol> </ol>可嵌套使用

<h4>大写字母列表：</h4>
<ol type="A"><!--如果不写type属性则默认为数字排序，type="a"小写字母列表，type="I"罗马数字列表，type="i"小写罗马数字排序-->
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

3.自定义列表

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

在这里插入图片描述
HTML区块
大多数 HTML 元素被定义为块级元素 或内联元素。
1.块级元素：在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用， <div>元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。 <table>元素的作用是显示表格化的数据。

2.内联元素：在显示时通常不会以新行开始。
实例:<b>, <td>, <a>, <img>
<span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

HTML布局
使用<div>元素的网页布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>

在这里插入图片描述
HTML表单和输入

<form action="html_form_action.php" method="get">//表单
First name: <input type="text" name="firstname"><br>//文本输入框
Password: <input type="password" name="pwd"><br>//密码框
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>//单选按钮

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>//复选框
<select>//下拉框
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">//提交按钮，要在<form>里面添加action="html_form_action.php"确认按钮后输入数据会传送到 "html_form_action.php" 的页面； method="get"属性
</form>

HTML框架
iframe语法

<iframe src="demo_iframe.htm" frameborder="0" width="200" height="200"></iframe>//frameborder 属性用于定义iframe表示是否显示边框
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>//iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性，

HTML脚本
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

不想qiao代码

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML（Hyper Text Markup Language）超文本标记语言基础学习

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p></body></html>注意：在中文网页中需要使用&
复制链接

扫一扫