HTML

最新推荐文章于 2024-05-10 09:46:16 发布
最新推荐文章于 2024-05-10 09:46:16 发布
阅读量411 收藏 3
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45632660/article/details/107916784
版权

B站搜索狂神说 视频链接:https://www.bilibili.com/video/BV1x4411V75C

HTML

HTML介绍

HTML是一个超文本标记语言

W3C标准包括:

​ 结构化标准语言(HTML \ XML)

表现标准语言(CSS)

行为标准(DOM \ ECMAScript)

HTML的注释

<!---->

HTML的基本结构

# DOCTYPE: 告诉浏览器，我们要使用什么规范
# title: 标题
# head: 标签代表网页头部
# body: 标签代表网页主体
# meta: 描述性标签,它用来描述我们网站的一些信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  
</head>
<body>
</body>
</html>

在这里插入图片描述

网页的基本标签

标题标签

#标题标签一共有六个
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

在这里插入图片描述

段落标签

# <p></p>
#分段显示
<p>《红楼梦》是一部颇具世界影响力的人情小说，举世公认的中国古典小说巅峰之作，</p> 
<p> 中国封建社会的百科全书，传统文化的集大成者。小说以“大旨谈情，实录其事”自勉，</p> 
<p>  “真事隐去，假语村言”的特殊笔法更是令后世读者脑洞大开，揣测之说久而遂多。</p>

在这里插入图片描述

换行标签

#<br/>
#只是单纯的换行，内容非常紧凑
《红楼梦》是一部颇具世界影响          力的人情小说，举世公认的中国古典小说巅峰之作，<br> 
 中国封建社会的百科全书，传统         文化的集大成者。小说以“大旨谈情，实录其事”自勉，<br> 
 “真事隐去，假语村言”的特殊           笔法更是令后世读者脑洞大开，揣测之说久而遂多。<br>

在这里插入图片描述

水平线标签

#<hr/>
《红楼梦》是一部颇具世界影响          力的人情小说，举世公认的中国古典小说巅峰之作，<br> 
中国封建社会的百科全书，传统         文化的集大成者。小说以“大旨谈情，实录其事”自勉，<br> 
“真事隐去，假语村言”的特殊           笔法更是令后世读者脑洞大开，揣测之说久而遂多。<br>

<hr>

<p>《红楼梦》是一部颇具世界影响          力的人情小说，举世公认的中国古典小说巅峰之作，</p> 
<p> 中国封建社会的百科全书，传统            文化的集大成者。小说以“大旨谈情，实录其事”自勉，</p> 
<p>  “真事隐去，假语村言”的特           殊笔法更是令后世读者脑洞大开，揣测之说久而遂多。</p>

在这里插入图片描述

粗体 斜体

#粗体 <b></b>		<strong></strong>
#斜体 <i></i>		<em></em>
#俩种方式随意选择

<b>粗体: I Love you</b><br/>
<i>斜体: I Love you</i><br/>
<strong>粗体: I Love you</strong><br/>
<em>斜体: I Love you</em><br/>

在这里插入图片描述

空格

#&nbsp;
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

在这里插入图片描述

大于 小于 版权

# &gt;大于
# &lt;小于
# &copy; 版权符号
10&gt;5<br/>
3&lt;7<br/>
&copy;版权所有余香

在这里插入图片描述

图像标签

# src 可以放置网站上的图片,也可以放置本地图片,根据路径来定
# alt 当加载图片找不到,代替图片显示内容
# title 鼠标悬停显示内容
# width 图片设置的宽度
# height 图片设置的高度
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595083649640&di=f284ca40158a08e418e125ed4be6a6e6&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2670715487%2C1547868437%26fm%3D214%26gp%3D0.jpg" alt="余香图片" title="余香"  width="500px" height="400px">

在这里插入图片描述

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

链接标签

 # href: 表示要跳转到哪里
 # target: 表示窗口在哪里打开
 	 # _blank 在新窗口中打开
 	 # _self 在自己的网页窗口中打开
 	 
# 可以生成文本链接,也可以生成图片链接

<a href="http://www.baidu.com" target="_self">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595084845963&di=bc09535e0e31267bdf2e798b6c1344c7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813173846_sB5cv.jpeg" alt="余香图片" width="500px" height="300px">
</a>

在这里插入图片描述

在这里插入图片描述

锚链接

# 点击下面直接跳到定点位置
# 页面间跳转
# 在a标签里面定义name属性
# 通过href里面#来跳转
<a name="top">定点</a>
    <p>
        <a href="http://www.baidu.com" target="_self">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595084845963&di=bc09535e0e31267bdf2e798b6c1344c7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813173846_sB5cv.jpeg" alt="余香图片" width="500px" height="300px">
        </a>
    </p>
    <p>
        <a href="http://www.baidu.com" target="_self">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595084845963&di=bc09535e0e31267bdf2e798b6c1344c7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813173846_sB5cv.jpeg" alt="余香图片" width="500px" height="300px">
        </a>
    </p>
    <p>
        <a href="http://www.baidu.com" target="_self">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595084845963&di=bc09535e0e31267bdf2e798b6c1344c7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813173846_sB5cv.jpeg" alt="余香图片" width="500px" height="300px">
        </a>
    </p>
    <p>
        <a href="http://www.baidu.com" target="_self">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595084845963&di=bc09535e0e31267bdf2e798b6c1344c7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F13%2F20170813173846_sB5cv.jpeg" alt="余香图片" width="500px" height="300px">
        </a>
    </p>
<a href="#top">点击</a>

功能性链接

#邮件链接
<a href="mailto:name@email.com" target="_self">Email</a>
#qq链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

补漏知识

# href里面添加# 跳转的是自己的网页,相当于刷新网页
<a href="#">刷新页面</a>

块元素和行内元素

块元素:

​ 无论内容多少,改元素独占一行

行内元素:

​ 内容撑开宽度,左右都是行内元素的可以排在一行

列表标签

# 有序列表ol
# 无序列表ul
# type定义有序和无序的类型
# 自定义列表dl
# 		dt:列表的名称
#		dd:列表的内容

<ol type="A">
     <li type="1">张三</li>
     <li>张三</li>
     <li>张三</li>
</ol>
<hr/>
<ul type="CIRCLE">
     <li>李四</li>
     <li>李四</li>
     <li>李四</li>
</ul>
<hr/>
<dl>
     <dt>姓名</dt>
     <dd>王五</dd>
     <dd>王五</dd>
     <dd>王五</dd>
</dl>

在这里插入图片描述

表格标签

# table 表格
# tr 行
# td 列
# border 边框
# width 宽度 可以是用%
# height 高度 不可以使用% 自己的理解:宽度大小根据屏幕大小是固定的可是使用%,而高度不能确定,高度的大小根据内容来定,而内容可以随时添加,所有不可以使用%。
# algin="center" 中心
# colspan 跨列
# rowspan 跨行
<table border="1px" width="50%" height="200" align="center">
      <tr>
          <td colspan="3"align="center">1</td>
            
      </tr>
      <tr>
          <td rowspan="2">4</td>
          <td>5</td>
          <td>6</td>
      </tr>
      <tr>
          
          <td>5</td>
          <td>6</td>
      </tr>
</table>

在这里插入图片描述

视频和音频

# video 视频
# 	src 资源路径
#	controls 控制条
#   autoplay 自动播放


# audio 音频
# 	src 资源路径
#	controls 控制条
#   autoplay 自动播放

<audio src="1.mp3" controls autoplay></audio>

在这里插入图片描述

页面头部结构

header: 标题头部区域的内容

footer: 标记脚步区域的内容

section: Web页面中的一块独立区域

article: 独立的文章内容

aside: 相关内容或应用(常用于侧边栏)

nav: 导航栏辅助内容

Iframe内联框架

 # 在自己的网站中可以嵌入东西
 <iframe src="http://www.baidu.com" width="100%" height="800"></iframe>

在这里插入图片描述

form表单

初始表单的post和get提交

# action 表单提交的位置 可以是一个网站 也可是一个请求处理地址
# method post get 提交方式
#   get方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
#   post方式提交: 比较安全,传输大文件.
# submit 提交按钮
# reset 重置按钮
<h1>注册</h1>
   <form action="http://www.baidu.com" method="get">
       <p>
       		<!--文本输入框-->
           用户:<input type="text" name="username"></input>
       </p>
       <p>
       		<!--密码输入框-->
           密码:<input type="password" name="password"></input>
       </p>
       <p>
          <input type="submit"></input>
          <input type="reset"></input>
      </p>
</form>

在这里插入图片描述

在这里插入图片描述

文本框和单选框

# maxlength 文本框输入字符最大数量
# size 文本框的长度
# value 默认初始值
# radio 单选按钮
# checked 按钮默认选中
<h1>注册</h1>
   <form action="http://www.baidu.com" method="get">
      <p>
          用户:<input type="text" name="username" maxlength="4" size="20" value="余香"></input>
      </p>
       <p>
           密码:<input type="password" name="password"></input>
       </p>
       <p>
           性别:<input type="radio" name="sex" value="boy" checked>男</input>
               <input type="radio" name="sex" value="girl">女</input>
       </p>
       <p>
          <input type="submit"></input>
          <input type="reset"></input>
        </p>
<form>

在这里插入图片描述

按钮和多选框

# checkbox 多选框
# checked 默认选中
# button 按钮 
<h1>注册</h1>
     <form action="http://www.baidu.com" method="get">
         <p>
             用户:<input type="text" name="username" maxlength="4" size="20" value="余香"></input>
         </p>
         <p>
             密码:<input type="password" name="password"></input>
         </p>
         <p>
             性别:<input type="radio" name="sex" value="boy">男</input>
                  <input type="radio" name="sex" value="girl" checked>女</input>
         </p>
         <p>
             兴趣:<input type="checkbox" name="hobbly" value="game" checked>游戏</input>
                <input type="checkbox" name="hobbly" value="sing">唱歌</input>
                <input type="checkbox" name="hobbly" value="dance">跳舞</input>
         </p>
         <p>
             按钮:<input type="button" value="点击"></input>
             图片按钮:<input type="image" src="">
         </p>
         <p>
            <input type="submit"></input>
            <input type="reset"></input>
        </p>
</form>

在这里插入图片描述

列表框文本域和文件域

# select 下拉列表
# option 选择
# selected 下拉列表默认选中
# textarea 文本区域
# cols 文本列
# rows 文本行
# file 文件上传
<h1>注册</h1>
   <form action="http://www.baidu.com" method="get">
         <p>
             用户:<input type="text" name="username" maxlength="4" size="20" value="余香"></input>
         </p>
         <p>
             密码:<input type="password" name="password"></input>
         </p>
         <p>
             性别:<input type="radio" name="sex" value="boy">男</input>
                  <input type="radio" name="sex" value="girl" checked>女</input>
         </p>
         <p>
             兴趣:<input type="checkbox" name="hobbly" value="game" checked>游戏</input>
                <input type="checkbox" name="hobbly" value="sing">唱歌</input>
                <input type="checkbox" name="hobbly" value="dance">跳舞</input>
         </p>
         <p>
             按钮:<input type="button" value="点击"></input>
         </p>
         <p>
             地区:<select name="列表名称">
                        <option value="中国">中国</option>
                        <option value="中国">美国</option>
                        <option value="中国" selected>法国</option>
                    </select>
         </p>
         <p>
             反馈:<textarea cols="50" rols="10" name="textarea">

                </textarea>
         </p>
         <p>
             文件上传:<input type="file" name="file"></input>
         </p>
         <p>
            <input type="submit"></input>
            <input type="reset"></input>
        </p>
	</form>

在这里插入图片描述

搜索框滑块和简单验证

# email 邮箱
# url 路径
# number 数字
# range 滑块
# search 搜索框
# step 自动增加
# max 最大
# min 最小
<h1>注册</h1>
     <form action="http://www.baidu.com" method="get">
       <p>
           邮件验证:<input type="email" name="email"></input>
       </p>
       <p>
           URL:<input type="url" name="url"></input>
       </p>
       <p>
           数字:<input type="number" name="number"></input>
       </p>
       <p>
           滑块:<input type="range" max="100" min="0" step="10" name="range"></input>
       </p>
       <p>
           搜索:<input type="search" name="search"></input>
       </p>
     </form>

在这里插入图片描述

表单的应用

# readonly 只读
# hidden 隐藏
# disabled 锁定
<h1>注册</h1>
     <form action="http://www.baidu.com" method="get">
        <p>
            用户名:<input type="text" name="username" readonly></input>
        </p>
        <p>
            密码:<input type="password" name="password" hidden></input>
        </p>
        <p>
            性别:<input type="radio" name="sex" disabled>男</input>
              <input type="radio" name="sex">女</input>
        </p>
     </form>

表单初级验证

# placeholder 提示信息
# required 不能为空 非空判断
# pattern 正则表达式 输入的内容必须是正则

<h1>注册</h1>
     <form action="http://www.baidu.com" method="get">
        <p>
            用户名:<input type="text" name="username" placeholder="请用户输入"></input>
        </p>
        <p>
            密码:<input type="password" name="password" required></input>
        </p>
        <p>
            性别:<input type="radio" name="sex" disabled>男</input>
              <input type="radio" name="sex">女</input>
        </p>
     </form>

在这里插入图片描述

Mls_Lucky
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML星空特效
兔子王
06-19 4万+
100行代码实现HTML星空特效。
圣诞树代码 html
m0_73309780的博客
12-04 6万+
圣诞树 html
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
html radio 类型的 ＜input＞ 元素
最新发布
听海边涛声
05-10 491
html radio 类型的 元素
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
HTML超链接
m0_48289363的博客
04-09 2万+
超链接，外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
学生个人简介html网页
11-17
在IT领域，HTML（HyperText Markup Language）是用于创建网页的标准标记语言，是网页开发的基础。这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合...
HTML发展历程与HTML5新特性
"HTML是Web程序设计的基础，主要涵盖了HTML的发展历程、不同版本的差异以及HTML的基本语法和概念。本文深入探讨了HTML从最初的定义到HTML5的演变过程，包括其创始人蒂姆·伯纳斯·李的贡献，以及HTML在各个阶段的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值