HTML基础

最新推荐文章于 2024-05-21 13:49:12 发布
最新推荐文章于 2024-05-21 13:49:12 发布
阅读量131 收藏 1
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57637904/article/details/120490599
版权

HTML基础

1.基础配置

配置浏览器的路径：

2.我的第一个网页

<!--
    注释信息
    DOCTYPE :告诉浏览器，我们要使用什么规范
 -->

<!DOCTYPE html>

<!-- 快捷键 Ctrl+/ 直接生成注释信息 -->
<!-- head标签代表网页头部 -->
<html lang="en">
<head>
    <!-- mate描述性标签，它用来描述网站一些信息 -->
    <!-- mate标签一般用来做SEO -->
    <meta charset="UTF-8">
    <mate name="keywords" content="关于java">

    <!--  title标签网页标题  -->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页主体 -->
<body>
Hello,world!
</body>
</html>

3.网页基本标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>三级标签</h4>
<h5>三级标签</h5>

段落标签

<!--段落标签-->
<h5>说散就散</h5>
<p>干嘛听苦情歌以为多浪漫</p>
<p>再浪漫都被拆散</p>
<p>说要平平淡淡</p>
<p>长路漫漫一起再共患难</p>
<p>高脚杯 在陪伴</p>
<p>以为决定 多果断</p>
<p>在青春 快过半的阶段</p>
<p>失去了对爱的基本判断</p>

换行标签

<!--换行标签-->
跳出爱的苦与疯 <br/>
很痛也必须放你走<br/>
简单得很遗憾 因为成长<br/>
我明白谁都有苦衷<br/>
毕竟我牵过你的手<br/>

水平线标签

<!--水平线标签-->
<hr/>

字体样式标签

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong><br/>
斜体：<em>i love you </em>
<br/>

注释和特殊符号

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
&copy;
&lt;

图像标签

<!--图像标签-->
<!--img学习
    src：图片地址（相对地址:推荐使用，绝对地址）
    ../  --上一级目录
-->
<img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">

超链接标签

<!--使用name做标记-->
<a name="top">顶部</a>

<!--a标签
    herf:必填，表示要跳转到那个页面
    target:表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己中打开
-->
<!--链接标签-->
<!--文本链接-->
<a href="demo01.html" target="_blank">点击我跳转到页面1</a><br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>
<!--图像链接-->
<a href="demo01.html">
    <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
</a><br/>

<p>
    <a href="demo01.html">
        <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
    </a><br/>
</p>
<p>
    <a href="demo01.html">
        <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
    </a><br/>
</p>
<p>
    <a href="demo01.html">
        <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
    </a><br/>
</p>
<p>
    <a href="demo01.html">
        <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
    </a><br/>
</p>
<p>
    <a href="demo01.html">
        <img src="../resources/image/1.JPG" alt="厦门" title="悬停文字" width="400" height="300">
    </a><br/>
</p>

<!--锚链接
    1.需要一个锚标记
    2，跳转到标记
    3.#+标记

    -->
<a href="#top">回到顶部</a>
<a name="down">底部</a>


<!--功能性链接
    邮件链接：mailto
    qq链接：QQ推广
-->
<a href="msilto:2420863642@qq.com">点击联系我</a>

列表

<!--有序列表
    应用范围：试卷，问答
-->
<ol>
    <li>java</li>
    <li>Pyhton</li>
    <li>yunwei</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr/>

<!--无序列表
    导航
    -->
<ul>
    <li>java</li>
    <li>Pyhton</li>
    <li>yunwei</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd：列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>liunx</dd>
    <dd>C</dd>
    <dd>qianduan</dd>
</dl>

表格

<!--表格table
    行 tr rows
    列 td

-->

<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan 跨行 -->
        <td rowspan="2">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>

音频和视频

<!--音频和视频
    src:资源路径
    controls: 控制条
    autoplay:自动播放

-->

<video src="../resources/video/01.mp4" controls></video>

<autio src=""></autio>

页面结构分析

header 标题头部区域内容

footer 脚部区域内容

section web中独立区域

article 独立的文章内容

aside 相关内容或应用

nav 导航类辅助内容

iframe内联框架

<!--iframe
    src:引用页面路径   地址
    name：框架标识名
    w-h:宽度高度
-->

<iframe src="https://www.baidu.com/" frameborder="0" width="300" height="300"></iframe>
<iframe src="//player.bilibili.com/player.html?aid=763053076&bvid=BV1u64y1a7hW&cid=409435705&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="500" height="300">
</iframe>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<!--表单from
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    methon:post ,get 提交方式
    get :我们可以在url中看到我们提交的信息，不安全，高效
    post： 比较安全，传输大文件
    value ：默认初始值
    maxlength ：最大长度
    size ：文本框长度
    hidden :隐藏域
    readonly :只读
    disabled :禁用
    placeholder ：提示信息
    required :非空
    pattern :正则表达式
-->

<form action="demo01.html" methon="post">

    <!--文本输入框： input type =“username”  -->
    <p>名字：<input type="text" name="uername" placeholder="请输入名字" required maxlength="10" size="15"> </p>

    <!--密码框 ： input type=“password” -->
    <p>密码： <input type="password" name="pwd"></p>

    <!--单选框标签
    input type="radio"
    value :单选框的值
    name ：表示组，同一组只能选择一个

    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!-- 多选框
    input type =“checkbox”
    checked 默认选中
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="habby">睡觉
        <input type="checkbox" value="code" name="habby" checked>敲代码
        <input type="checkbox" value="chat" name="habby">聊天
        <input type="checkbox" value="game" name="habby">游戏
    </p>

    <!--按钮
    input type="button"   普通按钮
    input type="image"    图像按钮
    input type="submit"   提交按钮
    input type="reset"    重置
    -->
    <p>
        <!--value是按钮的内容  -->
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/1.JPG" width="100" height="100">-->
    </p>

    <!--下拉框，列表框
    selected 默认选中
    -->
    <p>下拉框国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="indian">印度</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>

    <!--文本域
    cols ,rows 行列
    -->
    <p>反馈：
        <textarea name="textarea" id="12" cols="30" rows="10"></textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" value="提交">
    </p>

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量：
        <input type="number" name="商品数量" max="100" min="0" step="2">
    </p>

    <!--滑块
    input type ="range"
    -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <!--自定义邮箱
    https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
    -->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
         /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>
表单基本语法
<!--表单from
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    methon:post ,get 提交方式
    get :我们可以在url中看到我们提交的信息，不安全，高效
    post： 比较安全，传输大文件
    value ：默认初始值
    maxlength ：最大长度
    size ：文本框长度
    hidden :隐藏域
    readonly :只读
    disabled :禁用
    placeholder ：提示信息
    required :非空
    pattern :正则表达式
-->
文本输入框
<!--文本输入框： input type =“username”  -->
    <p>名字：<input type="text" name="uername" placeholder="请输入名字" required maxlength="10" size="15"> </p>

    <!--密码框 ： input type=“password” -->
    <p>密码： <input type="password" name="pwd"></p>

    <!--单选框标签
    input type="radio"
    value :单选框的值
    name ：表示组，同一组只能选择一个

    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
多选框
<!-- 多选框
    input type =“checkbox”
    checked 默认选中
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="habby">睡觉
        <input type="checkbox" value="code" name="habby" checked>敲代码
        <input type="checkbox" value="chat" name="habby">聊天
        <input type="checkbox" value="game" name="habby">游戏
    </p>
按钮
<!--按钮
    input type="button"   普通按钮
    input type="image"    图像按钮
    input type="submit"   提交按钮
    input type="reset"    重置
    -->
    <p>
        <!--value是按钮的内容  -->
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/1.JPG" width="100" height="100">-->
    </p>
下拉框
 <!--下拉框，列表框
    selected 默认选中
    -->
    <p>下拉框国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="indian">印度</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>
文本域
<!--文本域
    cols ,rows 行列
    -->
    <p>反馈：
        <textarea name="textarea" id="12" cols="30" rows="10"></textarea>
    </p>
文件域
<!--文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" value="提交">
    </p>
邮箱验证
<!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
URL
<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
数字
<!--数字-->
    <p>商品数量：
        <input type="number" name="商品数量" max="100" min="0" step="2">
    </p>
滑块
<!--滑块
    input type ="range"
    -->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
搜索框
<!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>
增强鼠标可用性
<!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
自定义邮箱
<!--自定义邮箱
    https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
    -->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
         /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
    </p>
我自故乡来
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端之HTML的页面结构、编辑器、标签、空元素基本介绍】
qq_44735180的博客
05-04 397
本章主要介绍了HTML 网页结构、HTML 编辑器、单双标签与标签关系分类、HTML 空元素。
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
空白单页面html,基于Vue的简单的单页面应用的实现_html/css_WEB-ITnose
weixin_34500880的博客
06-03 271
基于Vue的简单的单页面应用在对Vue和webpack有了一定了解后，我们就可以开始利用所了解的东西做一个简单的webapp了，不了解的同学可以看下我的前两篇关于vue和webpack的基本应用：webpack+vue起步 利用webpack和vue实现组件化构建项目首先创建各个组件，我的目录结构如下： //没有后缀名的都是文件夹|-wechat |-dist |-src...
html基础
02-20
html基础
怎么新建空的HTML,html移动端-新建空白页面meta各个标签的详解
weixin_34676828的博客
06-03 429
Documentmeta标签viewport视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放(即禁止缩放)，在网页加载时隐藏地址栏与导航栏(ios7.1新增)。width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素heig...
网页的组成、HTML概述、标签
FrankieCao的博客
05-10 650
HTML这门技术存在的意义就是定义网页的主体结构。-- form 标签：本身不显示，仅仅只是从逻辑上定义一个表单 -->-- action 属性：指定表单提交的目标地址（将来这里肯定是对接 Java 程序） -->-- method 属性：指定提交当前表单后，使用什么请求方式。可选值包括：get、post -->-- 请求方式建议使用 post -->
〖大前端 - 基础入门三大核心之 html 篇⑤〗- 网页的基础配置
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-02 2万+
上一篇学习完后，我们知道HTML骨架包含DTD、html标签对，html标签对还嵌套了 head 标签对和 body 标签对。我们也知道 head 标签对里是网页的配置，body标签对里是网页的内容。这篇文章就先来了解一些网页的基础配置。
HTML页面常用设置&&页面结构
qq_64281750的博客
05-08 1759
HMTL作为超文本，坦白来说，也是一种文本，在平时我们呢可以使用Word对文本进行一些美化设置，所以我们可以使用一些方法对超文本的网页也进行一些设置，下面我们就来看看怎么使用一些方法来简单的设置网页的属性。 网页背景颜色 大多数的浏览器默认的背景颜色是白色或者是灰白色，在网页设计中我们可以使用bgcolor属性设置整个网页的背景色。 语法<body bgcolor="背景颜色"> 背景色的表示方法有两种： （1）使用颜色的指定名比如，红色用“read”表示 （2）使用十六进制数值#R
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 8885
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
第一章 html环境配置(编辑器：HBuilder X)
yuyeze的博客
09-03 1659
学习html的第一步就是环境配置(个人见解，不喜勿喷)，今天就来讲解一下本专栏‘html css javascript学习笔记’的环境配置。(本专栏用的编译器为‘HBuilder X’)本次程序不是很难，如有问题，请私信。
HTML中的一些基础设置
Lockie89的博客
11-02 303
HTML中的一些基础设置, 文本设置, 多媒体设置, 控件设置
html页面常用的个一些基本配置
小哈力----一个小前端工程师
04-03 1002
作为前端工程师，总会经常写这些基本配置。诸如，编码格式、渲染方式、兼容性等
C#结合JS实现HtmlTable动态添加行并保存到数据库
初九之潜龙勿用
05-18 1424
在 Web 应用项目中，实现一对多录入的数据管理功能是一项常见的应用。因此可以实现一个相对轻量化的设计实现表格的录入,实现需求会使用到用C# 编写服务端Web 静态方法，Jquery 实现 Ajax 无刷新技术并调用服务器方法，Json 存储数据表格需要的配置，客户端大部分设计使用 Javascript 实现。
前端基础入门三大核心之HTML篇：无序列表的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 956
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
零基础HTML教程(34)--HTML综合实例
程序员大阳
05-18 719
DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 生平简介 </ title > </ head > < body > <!-- 头部 --> < header > < h1 > 苏轼网 </ h1 > </ header > <!
HTML全局属性
qq_41807399的博客
05-18 191
设置访问键盘元素的快捷键，每个浏览器触发快捷键的方法不同：IE：alt+设定值谷歌：alt+设定值火狐：alt+shift+设定值 例：
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 842
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
前端基础入门三大核心之HTML篇 —— IndexedDB详解
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 772
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
html基础手册下载
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值