菜单 搜索
首页 前端知识 简单的HTML

简单的HTML

2024-04-22 09:04:52 前端知识 前端哥 627 759 我要收藏

1.HTML介绍

HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它使用一系列的元素来描述网页的结构和内容,包括文本、图像、链接、表格等。

1.1HTML基础结构

HTML文件是一种纯文本文件,由一系列的元素构成。每个元素由一对尖括号<>包围,并用于定义网页的不同部分。例如:

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一段文字</p>
  </body>
</html>
复制
  • <!DOCTYPE html>声明定义了这是一个HTML5文档
  • <html></html>是整个HTML文档的根元素
  • <head></head>包含了文档的元数据,如标题、样式表等
  • <body></body>包含了网页的可见内容

1.2  HTML标题和段落

标题和段落是网页中最基本的元素。标题由<h1>到<h6>六个级别表示,数字越小级别越高。段落使用<p>元素定义。示例:

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一段文字</p>
  </body>
</html>
复制

1.3 HTML链接

<a>元素定义了超链接,使用href属性指定链接的URL。链接可以指向另一个网页,也可以指向同一页面的某个位置(锚点链接)。示例:

<a href="https://www.example.com">这是一个链接到example.com的链接</a>
 
<a href="https://www.example.com" target="_blank">这个链接会在新标签页中打开</a>
 
<a href="#bottom">跳转到页面底部</a>
 
<!-- 其他内容 -->
 
<h2 id="bottom">这是页面底部</h2>
复制

1.4 HTML媒体标签

<img>元素用于在网页中插入图像,使用src属性指定图像的URL,alt属性提供了图像的替代文本(当图像无法显示时显示)。示例:

<img src="example.jpg" alt="这是一张示例图片">
 
<img src="https://example.com/logo.png" alt="网站Logo">
复制

 如果你想添加音频或视频可以使用<dudio>和<video>:

<div>
        <audio src="https://m10.music.126.net/20240319155649/96db96aeb4629fe864d1843007b11779/yyaac/obj/wonDkMOGw6XDiTHCmMOi/3067332831/9179/0ea1/85ec/645a8325907dc22d0f5adaa165b074fa.m4a", controls></audio>
    </div>
    <div>
        <video src="https://player.vimeo.com/progressive_redirect/playback/617209007/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=d5b4b95263bc1cdd7d56a2592c0370fa35a874ed20271164cb261bdc245f06cf" controls width="50%"></video>
    </div>
复制

插入的链接可以是本地的路径，也可以是外部链接。 

1.5 HTML列表

HTML支持有序列表(<ol>)和无序列表(<ul>),列表项使用<li>元素定义。示例:

<ul>
  <li>这是一个无序列表项</li>
  <li>这是另一个无序列表项</li>
  <li>列表项可以嵌套
    <ul>
      <li>嵌套无序列表项</li>
      <li>另一个嵌套项</li>
    </ul>
  </li>
</ul>
 
<ol>
  <li>这是一个有序列表项</li>
  <li>这是另一个有序列表项</li>
  <li>有序列表也可以嵌套
    <ol>
      <li>嵌套有序列表项</li>
      <li>另一个嵌套项</li>
    </ol>
  </li>
</ol>
复制

1.6 HTML表格

使用<table>元素创建表格,其中包含行<tr>和单元格<th>(表头)和<td>(数据)。示例:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>
复制

1.7HTML表单

<form>元素定义了用于收集用户输入的HTML表单,其中包含各种表单控件,如文本框、复选框、单选按钮等。示例: 

<form action="/submit-form" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br>
 
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email"><br>
 
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>
 
  <label>性别:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br>
 
  <label>兴趣爱好:</label>
  <input type="checkbox" id="reading" name="hobbies[]" value="reading">
  <label for="reading">阅读</label>
  <input type="checkbox" id="sports" name="hobbies[]" value="sports">
  <label for="sports">运动</label>
  <input type="checkbox" id="music" name="hobbies[]" value="music">
  <label for="music">音乐</label><br>
 
  <input type="submit" value="提交">
</form>
复制

如果你想使表单能够提交，就必须使用label标签，默认的提交方式是get。 

1.8HTML语义化标签

这个无关紧要，可以用也可以不用，它使你写的网页 结构清晰，这些标签跟div除了名字不同之外，并没有什么不同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav></nav>
    </header>
    <main>
        <section>
            <article></article>
        </section>
    </main>
    <aside></aside>
    <footer></footer>
</body>
</html>
复制

header是头，nav代表导航栏，main代表主要内容，其他顾名思义。 

1.9 HTNML标准属性

 即id、class、title、style。

id是唯一的，class代表类名，可重复，可以有多个。这两个都可以用在css选择器中。

title就是标题，style里可以设置标签的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="g1" class="g1 g2 g3 g4" title="g1" style="color:blue; background-color:blueviolet;">g1</div>
    <div id="g2" class="ggg gg2 gg3" title="g2" style="color: brown; background-color: chocolate;">g2</div>
</body>
</html>
复制

1.10 自定义字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
 
        .d1:hover + .d2{
 
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 旋转 */
            /* transform: rotate(180deg); */
            transform: rotateX(180deg);
            
 
          
        }
 
        .d2{
            transition: all 2s linear;
        }
 
 
 
 
        @keyframes d3 {
            100%{
                transform: rotate(360deg);
            }
        }
 
        .d3{
            width: 70px;
            height: 70px;
            animation: d3 1s linear  reverse; /*infinite*/
            background-color: black;
            text-align: center;
            line-height: 70px;
            border-radius: 5%;
        }
    </style>
    <div class="d1"></div>
    <div class="d2"></div>
 
    <div class="d3"><img src="../360/img/hot_up.png" alt=""></div>
</body>
</html>
复制

 1.11 弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            border-style: solid;
            border-width: 1px;
            /* display: flex; */
 
        }
        .container div div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            font-size: 32px;
            text-align: center;
            line-height: 100px;
        }
        .container{
            /* flex-direction 主轴方向
                row row-reverse columu column-reverse
             */
            /*
            flex 
             */
            /* justify-content: space-around; */
            /* 交叉轴位置 */
            /* align-items: center; */
            
        }
        #d1, #d2, #d3{
            display: flex;
            /* width: 300px;
            height: 100px; */
        }
        #d2{
            justify-content: center;
        }
        #d3{
            justify-content: flex-end;
        }
 
    </style>
</head>
<body>
    <div class="container">
        <div id="d1"><div class="d1">1</div></div>
        <div id="d2"><div class="d1">2</div></div>
        <div id="d3"><div class="d1">3</div></div>
        <!-- <div class="d1">1</div> -->
    </div>
</body>
</html>
复制

1.12渐变与动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
 
        .d1:hover + .d2{
 
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 旋转 */
            /* transform: rotate(180deg); */
            transform: rotateX(180deg);
            
 
          
        }
 
        .d2{
            transition: all 2s linear;
        }
 
 
 
 
        @keyframes d3 {
            100%{
                transform: rotate(360deg);
            }
        }
 
        .d3{
            width: 70px;
            height: 70px;
            animation: d3 1s linear  reverse; /*infinite*/
            background-color: black;
            text-align: center;
            line-height: 70px;
            border-radius: 5%;
        }
    </style>
    <div class="d1"></div>
    <div class="d2"></div>
 
    <div class="d3"><img src="../360/img/hot_up.png" alt=""></div>
</body>
</html>
复制

1. 13HTML样式

可以使用内联样式、内部样式表或外部样式表(CSS文件)来设置HTML元素的样式。

内联样式
使用style属性直接设置元素的样式:

<h1 style="color:blue;font-size:36px;">这个标题具有内联样式</h1>
复制

内部样式表
在<head>部分使用<style>元素定义CSS样式:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      font-size: 36px;
    }
    p {
      color: green;
    }
  </style>
</head>
<body>
  <h1>这个标题使用内部样式表样式</h1>
  <p>这个段落也使用内部样式表样式</p>
</body>
</html>
复制

外部样式表
使用<link>元素链接外部CSS文件:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>这个标题使用外部样式表样式</h1>
  <p>这个段落也使用外部样式</p>
复制

html代码很简单，只要你能记住就好了，几乎不需要理解，但设置样式对新手来说是棘手的，因为你并不熟练，并不了解每个标签的特性。下面就介绍一下。

2.HTML各标签的特性

HTML标签特性

全局特性

一些特性可以应用于任何HTML元素,被称为全局特性。常见的全局特性包括:

  • id: 为元素赋予一个唯一的标识符,用于选择器等。
  • class: 为元素赋予一个或多个类名,用于选择器等。
  • style: 内联设置元素的CSS样式。
  • title: 为元素提供附加信息,在鼠标悬停时显示工具提示。
  • lang: 指定元素的语言。
  • data-*: 用于存储私有数据,可通过JavaScript访问。

示例:

<p id="intro" class="important" style="color:red;" title="这是一个重要段落" data-author="张三">这是一段重要文字。</p>
复制

链接特性

<a>标签用于创建链接,它有以下特性:

  • href: 链接的目标URL。
  • target: 指定链接在何处打开,如_blank为新标签页。
  • download: 将链接资源作为下载项而非在浏览器中打开。

示例:

<a href="https://www.example.com" target="_blank">在新标签页中打开</a>
<a href="example.pdf" download>下载PDF文件</a>
复制

图像特性

<img>标签用于插入图像,它有以下特性:

  • src: 图像的URL。
  • alt: 图像无法显示时的替代文本。
  • width和height: 设置图像的宽度和高度。

示例:

<img src="example.jpg" alt="这是一张示例图片" width="500" height="300">
复制

表格特性

<table>标签用于创建表格,其中包含<tr>(行)和<th>(表头单元格)、<td>(数据单元格),它们有以下特性:

  • border: 设置表格边框宽度。
  • cellpadding: 设置单元格内边距。
  • cellspacing: 设置单元格间距。
  • colspan和rowspan: 指定单元格合并列或行。

示例:

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th colspan="2">学生信息</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>90</td>
  </tr>
  <tr>
    <td>80</td>
  </tr>
</table>
复制

表单特性

<form>标签用于创建表单,其中包含各种输入控件,如<input>、<textarea>、<select>等,它们有以下常见特性:

  • name: 控件名称,用于提交数据时标识字段。
  • value: 控件的初始值。
  • required: 指定控件为必填项。
  • pattern: 指定控件值必须匹配的正则表达式模式。
  • min和max: 对数值型控件设置最小和最大值。

示例:

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required><br>
 
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}"><br>
 
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="65"><br>
 
  <input type="submit" value="提交">
</form>
复制

CSS样式设置注意事项

在设置HTML元素的CSS样式时,需要注意以下几点:

  1. 选择器优先级

CSS选择器有不同的优先级,按照以下顺序从高到低:

  • 内联样式 > ID选择器 > 类选择器 > 元素选择器
  • 同级选择器,后者覆盖前者
  • 较具体的选择器优先于较不具体的选择器
  1. 继承

一些CSS属性会从父元素自动继承到子元素,如color、font-family等。如需覆盖继承的样式,需要显式指定。

  1. 盒模型

理解CSS盒模型对于设置元素的margin、padding、border等样式很重要。

  1. 单位

CSS支持多种单位,如px(像素)、%(百分比)、em(相对字体大小)等,要根据情况选择合适的单位。

  1. 浏览器兼容性

不同浏览器对某些CSS属性或值的支持情况可能有所不同,需要注意兼容性问题。

  1. CSS重置

不同浏览器对HTML元素的默认样式存在差异,通常需要使用CSS重置来统一默认样式。

示例:清除所有元素的margin和padding:

* {
  margin: 0;
  padding: 0;
}
复制

 ok，下篇文章介绍css。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5766.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！