HTML（初级）笔记

Yuyy

发布于 2022-09-19 10:33:54

1K0

文章被收录于专栏：yuyy.info技术专栏yuyy.info技术专栏

本文最后更新于 689 天前，其中的信息可能已经有所发展或是发生改变。

涵盖内容

基本语法、标签、声明、属性标签属于什么元素，内联/内联-块级/块级元素

元素 + "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. + 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签， + 元素组成：起始标签+元素内容+结束标签

什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

<!DOCTYPE>声明

doctype 声明是不区分大小写的
html的版本，例如html5 <!DOCTYPE html>

中文编码

    <head>
        <meta charset="UTF-8">
    </head>

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

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

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

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

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。

HTML 属性

name="value"
style：规定元素的行内样式（inline style）

<hr> 标签在 HTML 页面中创建水平线。

HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

target 属性，你可以定义被链接的文档在何处显示

打开新窗口<a href="" target="_blank" "></a>

HTML <base> 元素

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

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

HTML<link> 元素

<link>标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML <style> 元素

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

HTML<meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

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

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

<meta> 一般放置于 <head> 区域

为搜索引擎定义关键词:

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

表格

<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>

HTML无序列表

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

HTML 有序列表

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

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例:<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例:<b>, <td>, <a>, <img>

字体居中text-align:center;

下拉选择框

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

HTML 框架

<iframe src="URL"></iframe>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-8-08 9，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度