前端之HTML入门_一只爱吃萝卜的小兔子

未知 02-07 6737

前端之HTML入门 HTML什么是HTML？HTML元素HTML元素结构斜体强调嵌套元素块级元素和内联元素块级元素内联元素空元素属性属性说明和示例布尔属性单引号或者双引号？剖析HTML文档HTML注释HTML中的空白与实体引用学习实践 ——HTML所有基本理论

HTML 什么是HTML？

超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。

HTML不是一种编程语言，而是一种标记语言(markuplanguage)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 ——维基百科

HTML元素 HTML元素结构

斜体强调 斜体

嵌套元素 嵌套元素

用标签strong突出“嵌套”。注意：开始标签结束标签都在标签内。

块级元素和内联元素块级元素

块级元素在页面中以块的形式展现,开头结尾都会另起一行。

块级元素块级元素块级元素

内联元素

内联元素不会导致文本换行，通常出现在一堆文字之间例如超链接元素a或者强调元素em>和 strong。

内联元素内联元素内联元素

空元素

没有内容的元素

属性属性说明和示例

属性包含元素的额外信息

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)属性名称，后面跟着一个等于号。一个属性值，由一对引号“ ”引起来。建议始终添加引号。

href: 这个属性声明超链接的web地址，也就是目的地 title: 为这个链接进行说明 target：链接的打开方式，target="_blank"表示在新标签页中显示链接。

<a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a>

布尔属性

它们的属性名和属性值一样

disabled 属性，使表单输入使之变为不可用(变灰色)

单引号或者双引号？ <a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a> <a href='https://littlemonster.neocities.org/' title='主页' target='_blank' rel='noopener noreferrer'>前端学习主页</a> <a href='https://littlemonster.neocities.org/' title="主页" target="_blank" rel='noopener noreferrer'>前端学习主页</a>

以上使用都是允许的，看个人习惯。但是不可以这样 href='内容" 同一个地方混用

剖析HTML文档

↑↑↑点击标题

HTML注释  HTML中的空白与实体引用

无论HTML内容中使用多少空格(包括空白字符，包括换行)，当渲染代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。于是出现的实体引用。

实体引用：在HTML中包含特殊字符实体引用列表

学习实践

学习实践一： 1.主标题。 2. 段落，你感兴趣的文本。 3. 突出任何重要的字词（斜体/粗体）。 4. 超文本链接。 5. 段落下方向你的文档添加一张图片（其他地方更好）。

<!DOCTYPE html>  <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html-all-page</title> <style> /* 颜色 */ html { background-color: rgb(83, 62, 122); } /*左右边距边框颜色 */ body { margin: 0 20px; border: 3px solid; background-color: rgb(125, 141, 156); } /* 相当div，文本居中 */ section { text-align: center; } /* 设置为块显示，让margin起效字体字体阴影 */ section h1 { display: block; color: rgb(0, 83, 159); font-size: xxx-large; text-shadow: 3px 3px 1px black; margin: 10px; } /* span内联元素字体 */ section span { font-size: small; } /* 段落字体 */ section p { font-size: xxx-large; } </style> </head> <body> <section> <a href="https://hanyu.baidu.com/shici/detail?pid=e6b7157ccfb2483dafcd0f2e0d4e372d&from=kg0" target="_blank" title="百度汉语——春晓"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0629%252F707d253ep00qvgjr1002id200hs00a0g00hs00a0.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646130804&t=bcc540b35d3c93562fcfc6fe178d6472" alt="枝上花，花旁鸟"></a> <h1>春晓</h1> 【作者】孟浩然 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </section> </body> </html>

网页连接

下一节：前端之head和元数据