【牛腩新闻】——HTML

最新推荐文章于 2024-01-26 11:37:07 发布

六道轮回 -- 鼬

最新推荐文章于 2024-01-26 11:37:07 发布

阅读量322

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/MirabelleZWH/article/details/86621322

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

基本模板：

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是文档标题</title>
        <style type="text/css">
            body {background-color:yellow}
            p {color:blue}
        </style>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <base href="http://www.runoob.com/images/" target="_blank">
    </head>

    <body>
        <标签>内容</标签>
    </body>
</html>

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

运行结果：

常用的标签：

标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

运行结果：

段落是通过标签 <p> 来定义的.

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

运行结果：

链接是通过标签 <a> 来定义的.

<a href="https://mp.csdn.net/">这是一个链接</a>

图像是通过标签 <img> 来定义的.

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="/images/logo.png" alt="logo" width="258" height="39" />

alt 属性用来为图像定义一串预备的可替换的文本。

指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

折行

<p>这个<br>段落<br>演示了分行的效果</p>

运行结果：

在新窗口打开文档：

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

表格

表格由 <table> 标签来定义。表格的表头使用 <th> 标签进行定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data）

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

无序列表是一列项目，列表项目使用特殊图形（如小黑点、小方框等）进行标记。无序列表使用 <ul> 标签。每个列表项始于 <li> 标签。

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

<dl>
    <dt>Coffee</dt>
        <dd>- black hot drink</dd>
    <dt>Milk</dt>
        <dd>- white cold drink</dd>
</dl>

区块

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 元素是内联元素，可用作文本的容器，<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

六道轮回 -- 鼬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
【牛腩新闻】——HTML

HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。基本模板：&...
复制链接

扫一扫

专栏目录