[前端]1.html基础

HTML 标签

全称: Hypertext Markup Language(超文本标记语言)

HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。

标签通常成对出现,包括开始标签和结束标签(也称为双标签),内容位于这两个标签之间,例如:

html 复制代码
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>

除了双标签,也存在单标签,例如:

html 复制代码
<input type="text">
<br>
<hr>

区别:单标签用于没有内容的元素,双标签用于有内容的元素

HTML 文件结构

html 复制代码
<!--这里放置文档的元信息-->
<!DOCTYPE html>
<html>
 <head>
  <!--这里放置文档的元信息-->
  <title>文档标题</title>
  <meta charset="UTF-8">
  <!--连接外部样式表或脚本文件等-->
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
 </head>
 <body>
  <!--这里放置页面内容-->
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">这是一个链接</a>
  <!--其他内容-->
 </body>
</html>

1. HTML 常见文本标签

注意要在在body内写

标题标签:

html 复制代码
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>

段落标签:

html 复制代码
<p>这是一个段落标签</p>

更改文本样式:

html 复制代码
更改文本样式: <b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s>

无序列表

html 复制代码
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>

有序列表

html 复制代码
<ol>
    <li>有序列表元素1</li>
    <li>有序列表元素2</li>
    <li>有序列表元素3</li>
</ol>

表格:

tr: table row

td: table data

td: table header

border为table的属性 控制边框宽度

html 复制代码
<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>元素21</td>
        <td>元素22</td>
        <td>元素23</td>
    </tr>
    <tr>
        <td>元素31</td>
        <td>元素32</td>
        <td>元素33</td>
    </tr>
</table>

2. HTML 属性

属性在HTML中起到非常重要的作用,它们用于定义元素的行为和外观,以及与其他元素的关系。

基本语法:

html 复制代码
<开始标签属性名="属性值">

每个HTML元素可以具有不同的属性

html 复制代码
<pid="describe"class="section">这是一个段落标签</p>
<ahref="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写,属性值对大小写敏感

html 复制代码
<img src="example.jpg" alt=""*>
<img SRC="example.jpg" alt=""*>
<img src="EXAMPLE.JPG" alt="">
<!--前两者相同,第三个与前两个不一样-->

适用于大多数HTML元素的属性

属性 描述
class 为HTML元素定义一个或多个类名(类名从样式文件引入)
id 定义元素唯一的 id
style 规定元素的行内样式

例如:

html 复制代码
<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

超链接

html 复制代码
    <a href="https://www.baidu.com">百度</a>					//一定要有https://
    <br>
    <a href="https://www.baidu.com" target="_blank">百度</a> //在新标签页打开百度
    <hr>

图片

html 复制代码
    <img src="logo.jpg" alt="" width="200">
	//src可以替换成图片url, 效果相同 alt是替代文本, 当图片无法显示时会显示替代文本

3. HTML区块

块元素(block)

​ 块级元素通常用于组织和布局页面的主要结构和内容,例如段落、标题、列表、表格等。它们用于创建页面的主要部分,将内容分隔成逻辑块。

​ 块级元素**通常会从新行开始,并占据整行的宽度,**因此它们会在页面上呈现为一块独立的内容块。

​ 可以包含其他块级元素和行内元素。

​ 常见的块级元素包括<div>,<p>,<h1><h6>,<ul>,<ol>,<1i>,<table>,<form>等。

html 复制代码
<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>
</div>

行内元素(inline)

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素,例如超链接、强调文本等。

行内元素通常在同一行内呈现,不会独占一行。

它们只占据其内容所需的宽度,而不是整行的宽度。

行内元素不能包含块级元素,但可以包含其他行内元素。

常见的行内元素包括<span>,<a>,<strong>,<em>,<img>,<br>,<input>等。

html 复制代码
<span>这是第 1 个 span 标签</span>
<span>这是第 2 个 span 标签</span>
<span>这是第 3 个 span 标签</span>
<span>这是第 4 个 span 标签</span>
<hr>
<span>链接点击这里 <a href="#">链接</a></span>

4. HTML表单

html 复制代码
<form action="#"> <!--action 后面跟后端提供的存数据的api 点击最下面的提交就会将数据提交到后端 -->
    <label for="username">用户名: </label>  <!-- for后面跟 id 即 数据的去处   -->
    <input type="text" id="username" placeholder="请输入内容"><br><br>  <!-- id 的属性值要与上面for 后id一致-->
    <lable for="pwd">密码: </lable>
    <input type="password" id="pwd" placeholder="请输入密码"><br><br> <!-- placeholder是框内提示 若改为value则是默认填写的值-->

    <label>性别:</label>
    <input type="radio" name="gender">男    <!-- radio 是圆形选择框-->
    <input type="radio" name="gender">女    <!-- name 属性的值如果相同则为唯一值 -->
    <input type="radio" name="gender">沃尔玛塑料袋

    <br><br>
    <label>爱好: </label>
    <input type="checkbox" name="hobby"> 唱歌   <!-- checkbox 是方形复选框 -->
    <input type="checkbox" name="hobby"> 跳舞
    <input type="checkbox" name="hobby"> RAP
    <input type="checkbox" name="hobby"> 篮球

    <input type="submit" value="上传">  <!-- submit是提交按钮 value的值是按钮上显示的字-->
</form>
相关推荐
excel几秒前
JavaScript 中的对象池:复用对象的高效方案
前端
excel6 分钟前
Vue实例挂载的过程中发生了什么
前端
琹箐10 分钟前
Aupload + vuedraggable实现 上传的文件可以拖拽排序
前端·vue.js
前端 贾公子14 分钟前
Vue.js props mutating:反模式如何被视为一种良好实践。
前端·javascript·vue.js
半夏知半秋14 分钟前
基于skynet框架业务中的gateway实现分析
服务器·开发语言·后端·学习·gateway
会飞的小菠菜6 小时前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页
Filotimo_6 小时前
2.CSS3.(2).html
前端·css
yinuo7 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip8 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
Pluchon9 小时前
硅基计划4.0 算法 字符串
java·数据结构·学习·算法