html基础常用必学

最新推荐文章于 2024-10-13 19:23:10 发布
最新推荐文章于 2024-10-13 19:23:10 发布
阅读量103 收藏
点赞数
分类专栏： 基础 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53313913/article/details/116381384
版权

常用基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签练习网页一界面</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--标题标签-->
<h1>吴戬</h1>
<h2>吴戬</h2>
<h3>吴戬</h3>
<h4>吴戬</h4>
<h5>吴戬</h5>
<h6>吴戬</h6>

<!--段落标签-->
<p>曾，曾经在我眼前</p>

   <p> 却又消失不见&nbsp;&nbsp;&nbsp;这是今天的第六遍</p>

    <p>电影里的配乐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好像你的双眼</p>
world! <br>word <br>
<!--水平线-->
<hr>
<!--粗体-->
<strong>年好呀</strong>
<!--斜体-->
<em>你好呀</em>

<!--特殊符号-->    
&lt;
&gt;
&copy;
</body>
</html>

图片与超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签二界面</title>
</head>
<body>
<img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
<a href="html_03.html#3jiemian">跳到第三界面</a>
<a href="html_03.html#down">第三界面down</a>
</body>
</html>

跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签三界面</title>
</head>
<body>
<!--看名字-->
<a name="top">顶部</a>
<a name="3jiemian">第三界面</a>
<!--target="_self" 自己的页面加载  _blank 另一个页面加载-->
<a href="../Demo1/html_01.html" target="_self">跳到一界面</a>
<a href="html_02.html" target="_blank">
<!--    没啥用只是为了让“回到顶部明显一点”-->
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</a>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<p>
    <img src="../resources/image/1.jpg" alt="沂蒙六姐妹" width="500" height="340" align="center" title="悬停文字">
</p>
<!--跳转标签-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<a href="mailto:1403786495@qq.com">联系我</a>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序-->
<ol start="">
    <li>java</li>
    <li>js</li>
    <li>html</li>
    <li>c/c++</li>
</ol>
<hr>
<!--无序-->
<ul>
    <li>java</li>
    <li>php</li>
    <li>css</li>
</ul>
<!--自定义-->
<dl>
    <dt><strong>学科</strong></dt>
    <dd>数学</dd>
    <dd>语文</dd>

    <dt><strong>城市</strong></dt>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px" >
<!--    第一行-->
    <tr>
        <td>姓名</td>
        <td align="center">学号</td>
        <td>科目</td>
        <td >成绩</td>
<!--        居中-->
        <td align="center">电话号码</td>
    </tr>
<!--    第二行-->
    <tr>
<!--        rowspan 合并行-->
<!--        colspan 合并列-->
        <td rowspan="3">张三</td>
        <td rowspan="3">12314325</td>
        <td>语文</td>
        <td>99</td>
        <td>1888888123</td>
    </tr>
<!--    ...-->
    <tr>
        <td >数学</td>
        <td>90</td>
        <td>1241412412</td>

    </tr>
    <tr>
        <td>英语</td>
        <td>90</td>
        <td>124154125135</td>

    </tr>
</table>

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px" >
<!--    第一行-->
    <tr>
        <td>姓名</td>
        <td align="center">学号</td>
        <td>科目</td>
        <td >成绩</td>
<!--        居中-->
        <td align="center">电话号码</td>
    </tr>
<!--    第二行-->
    <tr>
<!--        rowspan 合并行-->
<!--        colspan 合并列-->
        <td rowspan="3">张三</td>
        <td rowspan="3">12314325</td>
        <td>语文</td>
        <td>99</td>
        <td>1888888123</td>
    </tr>
<!--    ...-->
    <tr>
        <td >数学</td>
        <td>90</td>
        <td>1241412412</td>

    </tr>
    <tr>
        <td>英语</td>
        <td>90</td>
        <td>124154125135</td>

    </tr>
</table>

</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="../Demo1/html_01.html" method="get" >
        <p>
            注册:<input type="text" name="username"  placeholder="请输入账号" required>
        </p>
        <p>
            密码:<input type="password" name="pwd" placeholder="请输入密码" required>
        </p>
        <!--单选标签-->
        <p>
           性别: <input type="radio" name="sex" value="boy" checked>男
                <input type="radio" name="sex" value="girl">女
        </p>
        <!--多选标签-->
            <p>
                爱好:<input type="checkbox" value="game" name="hobby"> 游戏
                <input type="checkbox" value="code" name="hobby" checked> 代码
                <input type="checkbox" value="yuMaoQiu" name="hobby">羽毛球
            </p>
        <p>
            <input type="button" value="按钮">
<!--            <input type="image" src="../resources/image/1.jpg">-->
        </p>
        <!--不能用自闭标签-->
        <p>反馈:
            <textarea name="textarea" cols="40" rows="3"></textarea>
<!--            下拉框-->
        </p>城市:
        <select name="city" required>
            <option value="chengdu" >成都</option>
            <option value="shanghai" >上海</option>
            <option value="beijing"  selected>北京</option>
            <option value="hangzhou" >杭州</option>
        </select>

        <p>提交:
<!--            文件类型-->
            <input type="file" name="files" value="文件">
            <input type="button" value="上传" name="upload">
        </p>
        <p>
<!--            提交-->
            <input type="submit">
<!--            重置-->
            <input type="reset">
        </p>
        <p>

        </p>
    </form>
</body>
</html>
~insn~
关注
专栏目录
HTML常用基础知识归纳
m0_64863860的博客
06-21 1420
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面2.HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键
Python哪些基础知识必学？
m0_68437216的博客
04-11 2876
一、入门方法推荐 总体来讲，找一本靠谱的书，由浅入深，边看边练。 网上的学习教程有很多，多到不知道如何选择。所有教程在基础知识介绍方面都差不多，区别在于讲的是否足够细（例如运行原理）以及是否有足够的练习。 目前推荐大家看书《Python编程入门经典》，作者是美国教师，内容从基础知识开始，循序渐进，层层深入，适合零基础者。 告诉小编即可领取《Python编程入门经典》电子版书籍哦。 不要看很多本，专注于一本，从头到尾看下去，把里面的例子和习题都动手练习一遍，搞懂为什么。编程从一开始就离不开.
html入门的知识点,html新手入门必学知识点
weixin_32393875的博客
06-23 171
html新手入门必学知识点HTML初识1.HTML指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言2.不是编程语言，而是一种标记语言3.标记语言是一套标记标签(markup tag)html作用简单理解：网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户。超文本理解：1.它可以加入图片、声音、动画、多...
HTML基础
qq_44801321的博客
08-14 3833
W3C标准 结构化标准语言（HTML,XML）. 表现标准语言（CCS）. 行为标准语言（DOM，ECMAscript） HTML基本结构 <body> <-body>等成对的标签分别叫做开放标签和闭合标签 单独出现的叫自闭合标签 <!--DOCTYPE用来定义标准--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!--meta描述
html基础学习
weixin_52676304的博客
10-15 5360
html新手学习，以菜鸟教程为主
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7460
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
大数据必学Java基础（三十）：IDEA的使用介绍
07-13
【大数据Java基础】IDEA是Java开发中广泛使用的集成开发环境（IDE），它由捷克的JetBrains公司开发。IDEA具有诸多优点，比如能够节省时间和精力，通过提供丰富的功能和自动化工具，使得开发过程更加高效。它还能够...
html中常用的标签总结(必看)
12-14
它通过一系列标签来组织网页内容，使得浏览器能够解析并展示相应的元素。在本文中，我们将深入探讨一些HTML中常用的标签，帮助...因此，掌握HTML基础知识的同时，学习CSS和JavaScript也是成为优秀Web开发者的关键步骤。
html基础必备知识点
qq_38148024的博客
09-26 2034
HTML基础必备知识点 初识 超文本标记语言，主要是通过HTML标签对网页中的文本，图片，声音等内容的描述。 骨架格式 <html> 根标签 <head> 头标签 <title>这里写的是标题</title> 标题标签 </head> &lt...
HTML基础--标签
weixin_34253539的博客
06-27 266
HTML基础 一、HTML（超文本标记语言） html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。 后端与前端交互方式： 1、后端通过直接返回浏览器能够识别的html代码 2、后端返回数据，前端替换html种的指定数据 二、前端三把利器 1、HTML...
三、html基础—特殊标签
m0_46960665的博客
06-07 2875
一、实体 1、 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 2、 在HTML中有些时候，我们不能直接书写一些特殊符号 比如：多个连续的空格，比如字母两侧的大于和小于号 3、 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符） 实体的语法： &实体的名字; &nbsp; 空格 &gt; 大于号
js 收银元小程序
weixin_30594001的博客
08-21 302
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js考试</title></head><script type="text/javascript">// 1.编写一个程序，计算增加后的工资。要求基本工资大于等于100...
HTML----基础案例（与笔记对应）
sumuqi的博客
03-22 787
案例1 !DOCTYPE html> <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> 案例2 <html...
前端三剑客_CSS
Hello_super的博客
02-10 1139
前端三剑客_CSS 1、CSS简介 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <style> /* 这个样式将会应用到页面中所有的p标签中的内容。 */ p{ color: yellow;
HTML中的骨架标签（这里有一个叹号）DOCTYPE，＜html lang=“en“＞，＜meta charset=“UTF-8“＞
weixin_61197471的博客
01-23 2252
看注释 <!DOCTYPE html> <!-- !DOCTYPE为文件声明， 告诉浏览器网页的HTML版本 --> <html lang="en"> <!-- lang为英文language，en表示English，此外告诉浏览器网页版本 若为en浏览器常会提示将网页翻译成中文，建议设置为简体中文zh-CN --> <head> <meta charset="UTF-8"> <!-- 标识字符编码格式，.
标准HTML代码框架解析
weixin_47311182的博客
08-14 6217
HTML代码是网页的基础，任何Web编程框架或其它高级Web语言终将在浏览器中被解释为HTML基础代码。因此了解HTML基础代码结构及其原理是非常有必要的。
双人贪吃蛇 HTML5 版
最新发布
10-13 409
【代码】双人贪吃蛇 HTML5 版。
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、...随着技术的发展，前端开发不仅限于HTML和CSS，还涉及到JavaScript、Vue、React等框架，但对于初学者，扎实的HTML和CSS基础是必不可少的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值