前端之HTML入门
作者：互联网
前端之HTML入门
——HTML所有基本理论
HTML
什么是HTML？
-
超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。
-
HTML不是一种编程语言，而是一种标记语言(markuplanguage)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
-
超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
——维基百科
HTML元素
HTML元素结构
斜体强调
<em>斜体</em>
嵌套元素
<p><strong>嵌套</strong>元素</p>
用标签strong突出“嵌套”。
注意：开始标签结束标签都在标签内。
块级元素和内联元素
块级元素
块级元素在页面中以块的形式展现,开头结尾都会另起一行。
<p>块级元素</p><p>块级元素</p><p>块级元素</p>
内联元素
内联元素不会导致文本换行，通常出现在一堆文字之间例如超链接元素a或者强调元素em>和 strong。
<em>内联元素</em><em>内联元素</em><em>内联元素</em>
### 空元素
没有内容的元素
<img src="https://img2.baidu.com/it/u=3977027642,3661756691&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300" alt="测试图片">
属性
属性说明和示例
属性包含元素的额外信息
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号“ ”引起来。建议始终添加引号。
href: 这个属性声明超链接的web地址，也就是目的地
title: 为这个链接进行说明
target：链接的打开方式，target="_blank"表示在新标签页中显示链接。
<a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a>
布尔属性
它们的属性名和属性值一样
disabled 属性，使表单输入使之变为不可用(变灰色)
单引号或者双引号？
<p><a href="https://littlemonster.neocities.org/" title="主页" target="_blank" rel="noopener noreferrer">前端学习主页</a></p>
<p><a href='https://littlemonster.neocities.org/' title='主页' target='_blank' rel='noopener noreferrer'>前端学习主页</a></p>
<p><a href='https://littlemonster.neocities.org/' title="主页" target="_blank" rel='noopener noreferrer'>前端学习主页</a></p>
以上使用都是允许的，看个人习惯。
但是不可以这样 href='内容" 同一个地方混用
剖析HTML文档
↑↑↑点击标题
HTML注释
<!-- <p>HTML注释</p> -->
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>
<p>
<span>
<em>【作者】孟浩然</em>
</span>
</p>
<p>春眠不觉<strong>晓</strong>，处处闻啼<strong>鸟</strong>。</p>
<p>夜来<strong>风雨</strong>声，<strong>花</strong>落知多少。</p>
</section>
</body>
</html>
标签：块级,入门,前端,元素,HTML,超文本,内联,属性 来源： https://blog.csdn.net/weixin_46372074/article/details/122747356