html基础

最新推荐文章于 2024-09-23 17:12:42 发布
最新推荐文章于 2024-09-23 17:12:42 发布
阅读量180 收藏
点赞数 2
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68718700/article/details/126614225
版权

1、初始HTML，了解HTML结构。

<!--DOCTYPE ：告诉浏览器，我们要用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部标签，-->
<head>
<!--meta 是一个描述性标签，用来描述一些我们网站的信息-->
<!--meat 一般用来所seo-->
    <meta charset="UTF-8">
<!--    title 网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签，代表网页的主题-->
<body>
hello，world！
</body>
</html>

2、网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎        两只老虎</p>
<p>跑得快     跑得快</p>
<!--水平线标签-->
<!--水平线标签用于分隔开-->
<!--简易<hr>后加反斜杠，代表自闭和标签-->
<hr/>


<!--换行标签-->
 两只老虎   两只老虎 <br/>
跑得快   跑得快<br/>
一只没有眼睛  一只没有耳朵<br/>
真奇怪   真奇怪<br/>
<hr>
<!--粗体，斜体-->
粗体：i love you <br/>
<strong>i love you</strong> <br/>
斜体： i love you <br/>
<em>i love you</em> <br/>
<br/>
<!--空格-->
<!--%nbsp-->
空格： &nbsp;
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于号：&gt;<br/>
小于号： &lt;<br/>
版权符号：   &copy;版权所有小夕
<!--
特殊符号
-->


</body>
</html>

3、图像标签，在写HTML时，建议把图片放到与源代码相同目录下的images目录下，在调用图片时用相对路径来调用图片，以便在网页时的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<a id="top-panel">顶部</a>
<!--
../表示上一级目录
src：地址，可以填绝对地址也可以填相对地址
alt：图像文字，当图片出现异常无法显示时，会用这个文字代替
title：当鼠标悬停在图片上时会显示的字
width ：宽度
height：高度
-->
<img src="../resources/image/1.jpg" alt="图像"title="悬停文字"width="300"height="300">
</body>
</html>

4、链接标签，实现跳转,例如：在网页顶部设置一个标签，在网页尾部加入链接，实现通过点击链接从尾部跳转到顶部，当然，也可以实现不同网页之间的跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a id="top">顶部</a>
<!--a标签，  超链接标签
href： 引号里面填跳转到的位置
target=  表示窗口在哪里打开
_blank  在新标签页面打开
_self  ： 在当前页面打开
-->
<a href="https://www.baidu.com"target="_self">点击跳转百度 </a>
<br>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<br>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<br>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<br>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<br>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>
<a href="第一个网页.html">
  <img src="../resources/image/1.jpg"alt="头像" title="神子" width="300" height="300">
</a>

<!-- 锚标签
1、需要一个标记
-->
<a href="#top">回到顶部</a>
<a href="图像标签.html#top-panel">  跳转</a>
<br/>
<!--
功能性链接：
<a href="mailto:2601605001@qq.com">点击联系我</a>
邮件链接：mailto:
-->
<a href="mailto:2601605001@qq.com">点击联系我</a>

</body>
</html>

5、列表标签,包括有序列表，无序列表等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--
列表： 无序列表，有序列表，自定义列表
-->
<!--有序列表-->
<ol>
  <li>java</li>
  <li>python</li>
  <li>c</li>
  <li>c++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<!--  打标签是ul  里面的小标签不变-->
<!--  应用：导航，侧边栏-->
  <li>java</li>
  <li>python</li>
  <li>c</li>
  <li>c++</li>
</ul>
<hr/>
<!--自定义列表-->
<!--
dl :标签名
dt：列表名称
dd：列表内容
-->
<dl>
  <dt>科目</dt>
  <dd>Java</dd>
  <dd>c</dd>
  <dd>python</dd>
  <dd>c++</dd>
  <dd>c#</dd>
  <dt>地址</dt>
  <dd>河南</dd>
  <dd>北京</dd>
  <dd>上海</dd>
</dl>
</body>
</html>

6、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
标签名：table
行  tr
列  td
<table border="1px">
  标签名    加边距
-->
<table border="1px">
    <tr>
<!--<td colspan="4">1-1</td>   colspan="4"跨列，其中的4表示跨4列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--<td rowspan="2">2-1</td> rowspan="2"跨行  2表示跨2行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

7、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!-- 视频关键字：video
src  ： 路径
controls ： 设置视频的一些基本开始暂停，进度条，声音大小，下载等工具
autoplay  ： 可以设置成打开后自动播放
 -->
<video src="../resources/video/视频1.mp4" controls autoplay></video>
<!-- 音频关键字 audio
 其他设置信息与视频媒体元素相同
 -->
<audio src="" controls autoplay></audio>
</body>
</html>

8、页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
  <h2>网页头部</h2>
</header>

<section><h2>
  网页主题</h2>
</section>

<footer>
  <h2>网页脚部</h2>
</footer>


</body>
</html>

9、内联框架iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe 内联框架
src： 地址
w h ：宽度高度
-->
<!--<iframe src="https://www.4399.com" frameborder="0" width="1000" height="800"></iframe>-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.4399.com" target="hello">点击跳转</a>
</body>
</html>

10、表单学习 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<h1>注册</h1>
<!-- h1:一级标题-->
<!--
form ：表单关键字  action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
method=有 get和post两个提交方式
get 提交方式不安全  因为可以在url路径中看到我们提交的信息  但是高效
post 提交比较安全,在url路径中不会看到我们输入的信息 而且可以传输大文件  而get就无法传输大文件
-->
<form action="第一个网页.html"method="post">
  <!-- p 标签: 写一些具体的表单 通过input输入  text 表示文本框   password 表示密码框-->
<!--  value="我是程序员" value 值得是文本框中会显示出来的默认值
        maxlength="8" 表示可以输入的最大字符个数
        size="50" 表示文本框的长度
        -->
<!--    value="我是程序员" maxlength="8" size="50"-->
<!--    readonly  只读标志，表示只能读取，不能写或者更改-->
  <p>姓名1 : <input type="text"name="username" value="小夕" readonly ></p>
<!--  placeholder 提示信息    -->
  <p>姓名2 : <input type="text"name="username" placeholder="请输入用户名"></p>
<!-- required 设置为非空字段，设置此属性后，像要提交的时候就必须填写这个属性了   -->
  <p>姓名3 : <input type="text"name="username" placeholder="请输入用户名" required></p>
<!--    hidden 标签表示隐藏文本框，但这个属性还在，可以用来传递一些默认值-->
  <p>密码 : <input type="password" name="pwd" hidden></p>
    <p> 性别：
<!--   radio 表示单选框 必须有一个value值，如果像让两个东西合成一个单选框属性，就要通过name一样来放到一个组里-->
<!--         checked也可以表示默认选中的值-->
<!--        disabled 表示禁用，加入后就就无法在选中这个条件框了-->
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p> 自定义邮箱，使用正则表达式：
        <input type="text" name="diymail" pattern="此处百度正则表达式填写">
    </p>
    <p>爱好：
<!--   checkbox 表示多选框，也必须name相同放到同一个组中-->
<!--        在input中加入checked 表示默认人选中这个值-->
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="girl" name="hobby" checked>女孩
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="eat" name="hobby">吃
    </p>
    <p>按钮：
<!--        普通按钮-->
        <input type="button" name="btn1" value="点击变大">
<!--        图片按钮-->
<!--        <input type="image" src="../resources/image/1.jpg">-->
    </p>
    <p> 下拉框：
<!--        select  标签名字
            option 是他的子标签
            在option中加入一个selected可以设置为多选框默认的值
-->
        <select name="列表名称" id="">
            <option value="China">中国</option>
            <option value="USA">美国</option>
            <option value="瑞士" selected>瑞士</option>
        </select>
    </p>
    <p>文本域：
<!--      name="textarea"
         cols="30"  表示列数   rows="30"  表示行数
         文本内容 表示在文本域中默认写入的值
  -->
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>

    </p>
<!--    文件域-->
<!--    文件域 type=file-->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
<!--    邮箱验证-->
    <p>邮件:
        <input type="email" name="email">
    </p>
    <p>URL:
        <input type="url" name="url">
    </p>
    <p>数字验证:
<!--            number 是标签      name属性   最大值    最小值     每次增加或减少的值-->
        <input type="number" name="num" max="100" min="0" step="20">
    </p>
    <p>滑块:
<!--         range滑块标签                  滑块最大值   最小值   每次滑动改变的值-->
        <input type="range" name="range" max="100" min="0" step="2">
    </p>

    <p>搜索框:
        <input type="search" name="search">
    </p>
    <p>
<!--        点击这几个文字会自动锁定id传递的文本框，这样可以 增加鼠标的可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

  <p><input type="submit">
    <!--input type="submit"提交表单  -->
    <input type="reset">
    <!-- input type="reset"  重置表单--></p>
</form>
</body>
</html>

HTML很多内容穿插在这10小项中，反复练习，越做越好。

Dying.Light
关注
HTML基础模板
qq_61690596的博客
07-18 2094
HTML基本模板，每个基础元素的内容和作用
HTML基础
内心不种满鲜花就会长满杂草
05-16 4801
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。type类型为hidden的为隐藏表单，在前端页面不可见，但是放置在form表单中进行传值的时候也默认会将value值进行传递。form表单用于将其他表单标签"包"起来，以便作为一个整体，将填写的数据提交到服务器。html文档的后缀为.html或者.htm，两种后缀没有区别都可以使用。-- 在此处写注释 -->
HTML基础知识总结
qq_40046544的博客
11-14 4119
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
全网最全HTML基础
a1085653724的博客
04-20 5158
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4973
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础学习（全）
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 6606
HTML基本结构包含html标记，head标记，body标记...
HTML基础知识
m0_53161561的博客
03-23 4279
HTML基础知识HTML的概述及开发环境1.1.1 HTML的概述1.1.2 HTML的历史版本1.1.3 网页组成1.1.4 开发环境HTML标签组织页面内容2.1.1 HTML标签名称与属性 HTML的概述及开发环境 1.1.1 HTML的概述 HTML是超文本标记语言，英语名称为HyperText Markup Language，它是一种用于创建网页的标准标记语言。 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 超文本标记语言是标准通用标记语言
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4821
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8811
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
web基础：域名、网页、HTML、web版本
最新发布
shyuu的博客
09-23 1474
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 413
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
python：基于django的html订单提交页面
我是你大爷
09-23 613
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
网页设计html心得
ikunlxx的博客
09-23 738
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS3。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
html,js,react三种方法编写helloworld理解virtual dom
09-23 513
学习任何一个新语言，好像都从helloworld开始。：）。
HTML基础入门与开发环境选择
HTML基础知识详解 在IT开发领域中，HTML（HyperText Markup Language）扮演着核心角色，它是网页制作的基础。本文将深入探讨JavaWeb开发中的两种主要模式——C/S（客户端/服务器）和B/S（浏览器/服务器），以及HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值