自学前端——HTML篇
小刘要奋斗. 2024-06-19 12:33:03 阅读 85
HTML标签
’HTML‘全程是‘hypertext Markup langage(超文本标记语言) HTML通过一系列的’标签（也称为元素）‘来定义文本、图像、链接。HTML标签是由尖括号包围的关键字。
标签通常成对存在，包括开始标签和结束标签（也称为双标签），内容位于两个标签之间，例如：
<p>这是一个段落。</p><h1>这是一个标题。</h1><a href="#">这是一个超链接。</a>
除了双标签，也存在单标签，例如：
<input type="text"<br><hr>
HTML文件结构
<!-- 这里放置文档的元信息 --><!DOCTYPE html>//告诉浏览器这是一个HTML文件<html>//HTML标签对，也是根元素，HTML的起始点也是文档的最外层容器，包含整个文档的结构<head>文档的头部，包含了文档的原信息<!-- 这里放置文档的元信息 --><title>文档标题</title>文档标题<meta charset="UTF-8">文档编码格式<!-- 连接外部样式表或脚本文件等 --><link rel="stylesheet" type="text/css" href="styles.css">外部样式表css文件<script src="script.js"></script>外部样式表js文件</head><body>实际显示浏览器页面的内容比如文本，图像，链接等<!-- 这里放置页面内容 --)<h1>这是一个标题</h1><p>这是一个段落。</p >这是一个链接<!-- 其他内容 --></body></html>//HTML标签对，也是根元素
各个标签的含义
</head><body> <h1>一级标题标签</h1> <h2>二级标题标签</h2> <h3>三级标题标签</h3> <h4>三级标题标签</h4> <h5>四级标题标签</h5> <p>这是一个段落标签</p> <p> 更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s> </p> <ul>/无序列表 <li>无序列表元素一</li> <li>无序列表元素二</li> <li>无序列表元素三</li> </ul> <ol>//有序列表 <li>有序列表元素一</li> <li>有序列表元素二</li> <li>有序列表元素三</li> </ol> <h1>table row</h1> <h2>table date</h2> <h3>table header</h3> <table border="1"> //制作表格 <tr> <th>列标题1</th> <th>列标题2</th> <th>列标题3</th> </tr> <tr> <td>元素1</td> <td>元素2</td> <td>元素3</td> </tr> <tr> <td>元素11</td> <td>元素12</td> <td>元素13</td> </tr> <tr> <td>元素21</td> <td>元素22</td> <td>元素23</td> </tr> </table> </body></html>
HTML属性
属性在HTML中起到非常重要的作用，它们用于定义元素的行为外观，以及与其他元素的关系
基本语法：
<开始标签 属性名=“属性值”>
每个HTML元素可以具有不同的属性
<p id="describe" class="section">这是一个段落标签</p><a href="https://www.baidu.com">这是一个超链接</a>
属性名称不区分大小写，属性值对大小写敏感
<img src="example.jpg" alt=""><img SRC="example.jpg" alt=""><img src="EXAMPLE.JPG" alt=""><!--前两者相同，第三个与前两个不一样-->
| 属性 | 描述 |
| class | 为HTML元素定义一个或多个类名（类名从样式文件引入） |
| id | 定义元素唯一id |
| style | 规定元素的内行样式 |
例如：
<h1 id="title"></h1><div class="nav-bar"></div><h2 class="nav-bar"></h2>
<a>标签常用于创建链接到其他的网页或者位置
href属性定义了这个链接到的目标，可以是其他网页的URL文件的路径、电子邮箱地址、手机号等。
target属性定义链接的打开方式，
_self是一个默认值表示链接在当前窗口或者标签页中打开
_blank表示链接将会在新的窗口或者标签页打开
_parent表示链接在副窗口或者副框架中打开
_top表示链接在顶层窗口或者顶层框架中打开
例如：
<a href="https://docs.geeksman.com">这是一个超链接</a> <br> //换行标签 <a href="https://docs.geeksman.com"target="_blank">这是二个超链接</a> <br> <a href="https://docs.geeksman.com"target="_self">这是三个超链接</a> <br> <a href="https://docs.geeksman.com"target="_parent">这是四个超链接</a> <br> <a href="https://docs.geeksman.com"target="_top">这是五个超链接</a> <hr>//水平分割线
img图片标签
src属性定义了要显示图像文件的路径或者URL，可以是文件的相对路径、绝对路径，也可以是一个URL。
alt属性用于定义图像的这个替代文本，图片如果无法加载，浏览器就会显示出来alt属性中指定的文本。
设置图像的宽高
width属性设置宽度：height属性设置高度。
<img src="logo.jpg" alt=""width="500"height="400"> <hr> <img src="log.jpg" alt="该图片无法显示"> <hr> <img src="" alt="">
HTML区块 - 块元素与行内元素（HTML 重要概念，学习CSS的前置内容）
快元素（block）
块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。
快级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
可以包含其他块级元素和行内元素。
常见的块级元素包括<div>，<p>，<h1>到<h6>，<ul>，<ol>，<li>，<table>，<from>等。
行内元素（inline）
行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。
行内元素通常在同一行内呈现，不会独占一行。
它们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不会包含块级元素，但可以包含其他行内元素。
常见的行内元素包括<span>，<a>，<strong>，<em>，<img>，br，<input>等。
div标签是一个块级标签通常用于创建一个可以包含其他HTML元素的容器块，没有任何语意，仅用于组织内容，创建页面的布局结构。
比如用div标签创建网页不同的部分，例如：页眉、导航栏、侧边栏、中间的内容区域、页角。
<div class="nav">//导航栏 <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> <a href="#">链接4</a> <a href="#">链接5</a> </div> <div class="content">//主题内容区域 <h1>文章标题</h1> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> </div>
span标签相对于没有特殊元素的a标签和img标签，主要作用就是把一小部分文本给包装起来以便于它们使用样式、CSS，或者使用 JS 行为，span为行内元素，只会独占一行，只会占据它内容所需的一个宽度。
例如
<span>这是第 1 个 span 标签</span> <span>这是第 2 个 span 标签</span> <span>这是第 3 个 span 标签</span> <span>这是第 4 个 span 标签</span> <span>这是第 5 个 span 标签</span> <hr> <span>链接点击这里 <a href="#">链接</a> </span
总结：div标签通常用于创建块级容器以便于组织页面的结构和布局，而span标签，用于内联样式化文本给文本的一部分应用样式或者是标记使用这两个标签通常是与CSS和 JS 一起使用的，这样能实现更加复杂的页面布局和样式化。
HTML表单
form是表单的容器
action表示我们提交标签的时候，向何处发送我们的数据，action的属性值也就是URL,需要服务器也就是后端提供给我们的API
‘#’表示不跳转，锚点占位的作用
input是一个单标签
type属性规定了input元素的类型
placeholder属性的作用是在这个属性值里面填写你想要让它在文本框中显示的内容。给用户填写字段的标识
value属性的作用就是规定我们这个input元素的值
label标签专门为input元素做标记的标签，作用与span标签差不多，仅限于和input对应使用
radio单选，checkbox多选 id唯一 ，class不唯一
for属性是可以将label标签给绑定到input元素，一般input中的for属性与input中id所对应的，id对于每个元素每个标签都是唯一的
submit 显示提交，提交表单的数据。
<form> <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名"><br><br> <label for="pwd">密码：</label> <input type="password" id="pwd" placeholder="请输入内容"><br><br> <label >性别：</label> <input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 <input type="radio" name="gender"> 其他 <label>爱好 :</label> <input type="checkbox" name="hobby"> 唱歌 <input type="checkbox" name="hobby"> 跳舞 <input type="checkbox" name="hobby"> rap <input type="checkbox" name="hobby"> 篮球 <br><br> <input type="submit" value="上传"> </form>
注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。