HTML入门基础

最新推荐文章于 2023-03-17 16:49:33 发布
最新推荐文章于 2023-03-17 16:49:33 发布
阅读量708 收藏 2
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780057/article/details/124896287
版权

文章目录

了解HTML

网页基本技术
HTML(框架)+CSS(表现)+JavaScript(功能行为)

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

前端

适合用户直接接触的
跨平台优势：一个网页在安卓、ios、电脑都可以打开使用
开发周优势：原先是java、app写的，成本较高

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像淘宝，CSDN等网站有很多网页。

HTML(HyperText Markup Language)：超文本标记语言：

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；这种展示效果超越了文本展示的限制。
  • 标记语言：由标签构成的语言，我们在浏览器页面右键可以查看页面的源代码。整个网页是从这里开始的，然后到结束。

注意：

  1. HTML 文件以.htm或.html为扩展名
  2. HTML 标签不区分大小写
  3. HTML 标签属性值 单双引皆可
  4. HTML 语法松散
标签描述
HTML定义HTML文档
head定义关于文档的信息
title定义文档的主题
body定义文档的主题

浏览器小图标标签

在浏览网页的时候，会发现网站的页面在浏览器标题栏前面都会有一个小图标，要实现这个效果，只需要在head标签添加一个link标签即可。

语法：

<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

基础标签

标签描述
h1-h6标签标题
front标签定义文本的字体、字体颜色和尺寸（不建议使用，有CSS）
p标签定义段落
span标签定义区域，行内元素
br标签定义换行
hr标签定义水平线
div标签定义分割（块元素）常与CSS一起使用
strong/b标签定义 加粗
em/i标签定义倾斜
u标签定义下划线
center标签定义居中
sup标签定义superscripted（上标）
sub标签定义subscripted（下标）
HTML代码显示结果
&nbsp;空格
&gt;> 大于号
&lt;< 小于号
&amp;& 可用于显示其他特殊字符
&quot;" 引号
&reg;® 已注册
&copy;© 版权
&trade;™ 商标

<!-- 文本类型为html -->
<!DOCTYPE html>
<!-- 语言为英语 -->
<html lang="en">
<!-- head 放置页面----基本信息 -->
<head>
    <!-- 字符集utf-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器：兼容性
            分为IE8 以及IE8以下------2022.6.15IE停止服务，方便了前端开发者
            说明适配edge以及以上 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title标题 -->
    <title>第一天</title>

</head>
<body>
    <hr>
    <h1>标题</h1>
    <!-- h--标题标签 -->
    <h1>一级标题h1</h1>
    <h2>二级标题h2</h2>
    <h3>
        三级标题h3<br>
        h1 ~ h6 标题标签，字体逐渐减小，独占一行
    </h3>
    
    <hr>
    <h1>文本标签</h1>

    <!-- font--字体标签  face：设置字体  color：颜色 size：字体大小 -->
    <font face="宋体" size="8" color="#ff0000">王者荣耀</font><br>




    <!-- p--段落标签,特点，新起一段会或自动换行；与h标签差不多，但没有改变字体 -->
    <p>第一段话---p</p>
    <p>第二段话---p</p>

    <!-- span--不换行的标签 -->
    <span>这是一句话---span</span>

    <!-- br--换行符（强制换行） -->
    <br>

    <!-- hr--分隔线 -->
    <hr>

    <!-- div--里面可以嵌套所有标签 -->
    <div>这是第一个div标签</div><br>
    <div>这是第二个div标签</div><br>

    <hr>
    <!-- 格式化标签 -->
    <!-- b--加粗 -->
    <strong>重点1......strong</strong><br>
    <b>重点2.....b</b><br>

    <!-- cite--引用， 字体会倾斜 -->
    <cite>王者荣耀</cite><br>
    <!-- em/i-- 字体倾斜 -->
    <em>我会倾斜诶em</em><br>
    <i>我会倾斜诶em</i><br>
    <!-- u--字体下划线 -->
    <u>我有下划线诶u</u><br>
    <!-- center--文本居中 -->
    <center>我在中间诶cneter</center>


    <!-- sup--上角标 -->
    x<sup>2</sup>
    <em> sup上角标</em><br>
    <!-- sub--下角标 -->
    Al<sub>2</sub>
    O<sub>3</sub>
    <em> sub下角标</em><br>

    <!-- 网页特殊符号 -->
    <!-- 再页面中，文本中直接打空格只会显示一个空格 -->
    <p>空       格</p><br>
    <!-- &nbsp;--表示空格 -->
    <p>空&nbsp;&nbsp;&nbsp;&nbsp;格</p><br>
    <!-- &gt;--great than 大于号 -->
    <p>100&gt;99</p><br>
    <!-- &lt;--less than 小于于号 -->
    <p>99&lt;100</p><br>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

图片、音频、视频标签

标签描述
img定义图片
audio定义音频。支持的音频格式：MP3、WAV、OGG
video定义视频。支持的音频格式：MP4, WebM、OGG

  • img：定义图片

    • src：规定显示图像的 URL（统一资源定位符）

    • height：定义图像的高度

    • width：定义图像的宽度

  • audio：定义音频。支持的音频格式：MP3、WAV、OGG

    • src：规定音频的 URL

    • controls：显示播放控件

  • video：定义视频。支持的音频格式：MP4, WebM、OGG

    • src：规定视频的 URL

    • controls：显示播放控件


<!DOCTYPE html>
<html lang="en">
<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>媒体</title>
    <link rel="shortcut icon" type="image/x-icon" href="abibaba.ico"/>
</head>
<body>
    <!-- src 图片路径   alt当图片加载不出来裂开时i显示的文本
    title当图标悬在图片时出现的文本
    路径分为绝对路径和相对路径 -->
    <img src="D:\JAVA图片.jpg" alt="没找到诶！" title="我是图片诶！" height="200px" width="200px">
   
    <!-- audio--音频标签
    src 资源路径    controls  资源控件
    autoplay 没有用，浏览器会禁止：维护用户体验
    loop 循环播放 -->
   
    <audio src="留君遥.mp3" controls autoplay loop></audio>
    <!-- video--视频标签
    controls 资源控件
    autoplay 单独使用没有用，浏览器会禁止：维护用户体验
    muted 可以配合autoplay使用，实现自动播放
    poster 没有播放时显示的封面
    loop 循环播放 -->
    <video src="哈哈哈视频.mp4" controls muted autoplay poster="java.jpg" ></video>

链接标签

a 标签属性：
href：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<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>链接</title>
</head>
<body>
    <a href="#3">去最下面</a><br>
   
    <!-- 1.页面跳转  href -->
    <a href="https://www.baidu.com/">去百度</a><br>
    <a href="https://blog.csdn.net/weixin_57780057" target="_blank">去CSDN</a><br>
    <!-- target： _blank新开一个网页 _self用当前也显示目标内容 -->
    <!-- 2.文件下载---href指向目标文件
    指向文件夹会显示目录 -->
    <a href="">下载功能</a><br>
    <!-- 3.锚点定位
    <a href="#id属性值">回到顶部</a> -->
    <div style="height: 1200px; width: 40px; background-color: green;"></div>
    <a href="#top">回到顶部</a><br>
    <div id="3">最低端</div>
</body>
</html>

列表标签

标签语义说明
olordered list有序列表
ulunordered list无序列表
lilist列表项
dldefinition list定义列表
dd自定义列表的每一项

有序列表

type属性值列表项的序号类型
1数字1、2、3……
a小写英文字母a、b、c……
A大写英文字母A、B、C……
i小写罗马数字i、ii、iii……
I大写罗马数字I、II、III……

无序列表

type属性值列表项的序号类型
disc默认值，实心圆“●”
circle空心圆“○”
square实心正方形“■”

自定义列表

 <dl>
 	<dt>定义名词</dt>
	<dd>定义描述</dd>
	 ……
</dl>

<!DOCTYPE html>
<html lang="en">
<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>列表标签</title>
</head>
<body>
   <!-- ol--有序列表 order list -->
   <ol type="1">
       <li>拿手机</li>
       <li>解锁</li>
       <li>叫朋友</li>
       <li>打开王者荣耀</li>
       <li>开始游戏</li>
       <li>开启峡谷之旅</li>
   </ol>
   <!-- ul--无序列表 unordered list -->
   <ul type="square">
       <li>吃水</li>
       <li>吃甜食</li>
       <li>吃咸食</li>
       <li>吃鸡腿</li>
   </ul>
   <!-- dl--自定义列表 defined list -->
   <dl>
        <!-- dt--定义的标题 -->
        <dt>游戏</dt>
        <!-- dd--自定义列表的每一项 -->
        <dd>王者荣耀</dd>
        <dd>QQ飞车</dd>
        <dd>英雄联盟</dd>
        <dd>原神</dd>
   </dl>
</body>
</html>

表格标签

<table>、<tr>和<td>是HTML表格最基本的3个标签

table ：定义表格 table（表格）

  • border：规定表格边框的宽度

  • width ：规定表格的宽度

  • cellspacing：规定单元格之间的空白

  • tr ：定义行 table row（表格行）

    • align：定义表格行的内容对齐方式

  • td ：定义单元格 table data cell（表格单元格）

    • rowspan:规定单元格可横跨的行数

    • colspan:规定单元格可横跨的列数

  • thead 表头 table head

  • th：定义表头单元格 table header

  • tbody： 表身 table body

  • caption： 表格标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1px"  cellspacing="0" width="500">
        <!-- 表的名称 -->
        <caption>信息表</caption>
        <!-- 通过使用thead和th，将字段与内容分开 -->
        <thead >
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tr align="center">
            <!-- rowspan--合并行，="要合并的行数" -->
            <td rowspan="3">一班</td>
            <td>小明</td>
            <td>男</td>
           
            <td>18</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr align="center">
            <!-- colspan--合并列，="要合并的列数" -->
            <td colspan="3">状况良好</td>
        </tr>
    </table>
    <table border="1px"  cellspacing="0" width="240">
        <caption>游戏</caption>
        <thead>
            <th>游戏名称</th>
            <th>游戏难度</th>
            <th>推荐程度</th>
        </thead>
        <tr align="center">
            <td>王者荣耀</td>
            <td>易</td>
            <td>强烈</td>
        </tr>
        <tr align="center">
            <td>英雄联盟</td>
            <td>中</td>
            <td>还可以</td>
        </tr>
        <tr align="center">
            <td>QQ飞车</td>
            <td>中</td>
            <td>强烈</td>
        </tr>
    </table>
    <style>
        table{
            border-spacing: 0px;
        }
 
        td{
            width: 80px;
            text-align: center;
        }
       
    </style>
    <table border="1px">
        <caption>个人信息表</caption>
        <tr>
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>出生年月</td>
            <td></td>
            <td rowspan="3">照片</td>
        </tr>
        <tr>
            <td>身高</td>
            <td></td>
            <td>民族</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td></td>
            <td>身份证号码</td>
            <td colspan="3"></td>
        </tr>
    </table>
</body>
</html>

表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
form
form是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果

  • action：规定当提交表单时向何处发送表单数据，该属性值就是URL

    以后会将数据提交到服务端，该属性需要书写服务端的URL。现在可以书写 # ，表示提交到当前页面来看效果。

  • method ：规定用于发送表单数据的方式

    method取值有如下两种：

    • get：默认值。如果不设置method属性则默认就是该值
      • 请求参数会拼接在URL后边
      • url的长度有限制 4KB
    • post：
      • 浏览器会将数据放到http请求消息体中
      • 请求参数无限制的

用户可以在数据框中输入自己想输入的内容，点击提交按钮以后会将数据发送到服务端；可以将 form 标签的 action 属性值设置为 # ，将其将数据提交到当前页面。

表单项标签可以分为以下三个：

  • <input>：表单项，通过type属性控制输入形式
  • <select>：定义下拉列表，<option> 定义列表项
  • <textarea>：文本域
<!DOCTYPE html>
<html lang="en">
<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>表单</title>
</head>
<body>
    <!-- form--表单标签     action 上传地址 -->
 <!-- method
    get 默认：请求参数会拼接在URL后边，url的长度有限制 4KB，在请求头里
    post：浏览器会将数据放到http请求消息体中，请求参数无限制的 在请求体里-->

    <form action="#" method="post">
    
        <!-- input-
        name属性 代表当前输入框输入参数名
        value属性 代表当前input标签的值
        sumbit 其实就是将 value值给name，最后发给action的上传地址-->
        输入文本: <input type="text" name="username" value="默认值"><br>
        输入密码: <input type="password" name="pwd"><br>
        <!-- radio--单选框
        对于单选题来说，需要对应同一个name值，和对应的value值 -->
        选择你最喜欢的地区：
        <input type="radio" name="area" value="河南"> 河南
        <input type="radio" name="area" value="山东">山东
        <input type="radio" name="area" value="北京">北京<br>
        <!-- checkbox--复选框 -->
        选择你喜欢的游戏：
        <input type="checkbox" name="game" id="王者荣耀"> 王者荣耀
        <input type="checkbox" name="game" id="原神"> 原神
        <input type="checkbox" name="game" id="英雄联盟"> 英雄联盟<br>
        <!-- file--文件上传 -->
        文件上传：<input type="file" name="file"><br>
        <!-- rage--滑块 -->
        滑块：<input type="range" name="" id=""><br>
        <!-- date--日期 -->
        日期：<input type="date" name="" id=""><br>
        <!-- textarea--文本域 相当于大一点的文本输入框 -->
        文本：<br>
        <textarea name="" id="" cols="30" rows="10"></textarea><br>
        <!-- select option  下拉-->
        <select name="city" id="">
            <option value="河南">河南</option>
            <option value="山东">山东</option>
            <option value="安徽">安徽</option>
            <option value="广州">广州</option>
            <option value="北京">北京</option>
        </select><br>
        <!-- 重置表单 -->
        <input type="reset" value="重置"><br>
        <!-- 提交表单 -->
        <br><input type="submit"><br>
       
    </form>
</body>
</html>

注意：

  • 以上标签项的内容要想提交，必须得定义 name 属性。
  • 每一个标签都有id属性，id属性值是唯一的标识
  • 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。
代码不会敲
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML中加入的图片裂了,css
weixin_31937913的博客
06-04 1657
cssbody {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;overflow: hidden;}h1 {position: relative;font-family: 'Montserrat', Arial, sans-serif;font-size:...
Django - 如何解决把图片加载到html中出现裂图的情况
Brandonn_Xu的博客
08-30 751
第二步：确保django.contrib.staticfiles已经注册在setting.py文件中。将本地的静态文件写入html中，出现图片加载不出的情况（出现裂图的图标）第一步：确保static文件夹存在与templates同级的目录下。第三步：确认setting.py文件中定义了STATIC_URL。
img图片路径错误时，显示破图/图片裂开，如何处理？
weixin_47793882的博客
03-25 1万+
img图片路径错误时，显示破图/图片裂开，如何处理？ 首先我们可以设置img的alt属性，当图片显示不出来的时候就会显示对应的文字，但是此时还会出现一张图片破裂，很不美观。 如下： 一、第一种方式： 1.设置css样式 img[src=''], img:not([src]) { opacity: 0; } 2.路径出错时，把路径置空 js写法: <img :src="scope.row.logoUrl" alt="logo" onError={{ this.src = ''}}
html的img标签不想显示某个图片或者没有图片时img标签不显示裂图
codezl的博客
12-04 4395
img标签src为空时，不想出现裂开的图标 img[src=""],img:not([src]){ opacity:0; }
HTML标记语言篇--学习笔记01
qq_37555524的博客
09-15 2588
HTML标记语言篇 第1章 HTML基础 1.1 基本概念 WWW 是“World Wide Web”（全球广域网）的缩写，简称为Web，中文又称为“万维网”。 HTML（Hypertext Mar...
HTML在插入图片时，块级元素和块级元素总有一些小缝隙。解决方案
m0_55328858的博客
03-24 1228
<img src="https://cdn.pixabay.com/photo/2021/08/04/13/06/software-developer-6521720__480.jpg" alt=""> <div style="background:gold;width: 100%; height: 300px; "></div> 解决方案是将img元素转换为块级元素就可以了，使用CSS实现为 img { display:block; } 原因是由于...
HTML入门基础学习总结
04-03
本篇文章将深入浅出地探讨HTML入门基础，帮助初学者快速掌握这一核心技能。 首先，了解HTML的基本结构至关重要。一个基本的HTML文档由三部分组成：文档声明、头部（head）和主体（body）。文档声明如`<!DOCTYPE ...
html入门基础知识
01-07
本文将详细讲解HTML入门基础知识，帮助初学者快速上手。 一、HTML简介 HTML全称为超文本标记语言，是一种用于创建网页的标准标记语言。它通过一系列的标签来描述网页的结构和内容，浏览器解析这些标签后，将其转化...
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
HTML入门基础教程
07-06
这个“HTML入门基础教程”旨在帮助初学者快速理解并掌握HTML的基本概念和语法，从而能够制作出自己的CHM电子书或者其他网页内容。 HTML由一系列元素组成，这些元素通过标签来定义。每个HTML元素都由开始标签和结束...
HTML零基础入门教程（详细）
热门推荐
m0_61886762的博客
05-28 3万+
首先我们先介绍一下网页： 网页时构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此我们把它俗称为HTML文件。 HTML指的是超文本标记语言，它是一种用来描述网页的一种语言。标记语言是一套标记标签。 超文本的含义： （1）可以加入图片、声音、动画、多媒体内容，超出了文本的限制. (2) 可以从一个文件中跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）. 常用的浏览器： 浏览器是网页显示、运行的平
初识HTML（新手入门）
baichaji的博客
12-14 770
HTML是一种超文本标记语言（英文全称：HyperText Markup Language，简称：HTML），HTML是 前端最基础的部分，但我们不能认为他就是不重要的，相反他是非常重要的。HTML可以说是页面的骨架（框架）。我们可以在HTML页面中船舰图片、链接、搭建页面主要框架等。HTML不属于编程语言，而是一种标记语言，
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7259
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
HTML——语法
Alyson_jm的博客
02-19 4625
文章目录页面结构一、文档声明头二、页面语言头标签meta 标签title 标签base 标签link 标签三、body 标签语义为什么要语义化写HTML 代码要注意些什么 页面结构 一个标准的HTML页面如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
[36]javascript入门
周小董
06-10 1526
入门程序 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;JS入门——
html入门教程
打代码是一天，不打代码也是一天
03-17 4190
dl > < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 …… < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 ……
标准HTML代码框架解析
weixin_47311182的博客
08-14 6191
HTML代码是网页的基础，任何Web编程框架或其它高级Web语言终将在浏览器中被解释为HTML基础代码。因此了解HTML基础代码结构及其原理是非常有必要的。
html入门基础知识无图
最新发布
10-08
学习HTML的基础知识包括了解HTML的基本结构和常用标签的使用方法。 以下是HTML的基础知识无图的内容： - HTML文档的基本结构是由<!DOCTYPE>声明、<html>元素、元素和元素组成。 - 在元素中，可以设置网页的标题、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码不会敲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值