HTML基础知识

最新推荐文章于 2024-10-09 11:42:00 发布
最新推荐文章于 2024-10-09 11:42:00 发布
阅读量81 收藏
点赞数
分类专栏： 日常学习 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43098167/article/details/117371765
版权

目录

基本标签

图像标签

链接标签

列表

表格

页面结构

内联框架

表单相关

基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 花样字体标签
  • 特殊符号标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<hr/>
<!--段落标签-->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<hr/>
<!--换行标签-->
第一段<br/>
第二段 <br/>
<hr/>
<!--粗体，斜体-->
<strong>粗体字</strong>
<em>斜体字</em>
<hr/>
<!--注释，特殊符号-->
空     格：
空&nbsp;&nbsp;&nbsp;格：
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有

</body>
</html>

图像标签

  • 图像标签
    • src：图片地址
    • alt:可替代文字
    • title：悬停文字
    • width：宽度
    • height：高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--图片标签
src:必填,图片地址：相对路径，绝对路径。
alt:必填
-->
<img src="../resources/images/1.jpg" alt="替代文字" title="悬停文字" width="300" height="300">
<br/>
<a href="04链接标签.html#down">跳转</a>
</body>
</html>

链接标签

  • a标签
  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<br/>

<!--a标签
href:必填，表示要跳转到的那个页面
target:表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>
<br>
<a href="03图像标签.html" target="_self">点我跳转到页面</a>
<br/>
<a href="https://www.baidu.com" target="_blank">
    <img src="../resources/images/1.jpg" alt="替代文字" title="悬停文字" width="300" height="300">
</a>
<br/>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>


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

</body>
</html>

列表

  • 有序列表
  • 无序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>title</dt>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
tr 行
td 列
-->
<table border="2px">
    <tr>
<!--        colspan 跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
<!--        rowspan 跨行-->
        <td rowspan="2">A</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">B</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

页面结构

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标题脚部区域的内容（用于整个页面或页面中的一块区域）
sectionweb页面中一块独立的区域
article独立的文章内容
aside相关的内容或应用（常用于侧边栏）
nav导航类辅助内容
<!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>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src:地址
w-h:宽度和高度
-->
<iframe src="https://baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

表单相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>登录</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求地址
method：post,get 提交方式
    get:在url中可以看到提交的内容，不安全，高效
    post:比较安全，传输大文件
-->
<!--表单应用
    隐藏域：hidden
    只读：readonly
    禁用：disabled

    提示信息：placeholder
    非空：required
    正则表达式：pattern
-->
<form action="01HTML入门.html" method="get">
<!--    文本输入框：input type='text'
        value:默认初始值
        malength:最长能写几个字符
        size:文本框长度
-->
    <p>登录名称：<input type="text" name="username" placeholder="请输入名称" required></p>
<!--    密码框：input type='password'-->
    <p>登录密码：<input type="password" name="pwd"></p>

<!--    单选框：input type='radio'
        value:单选框的值
        name：表示组
        checked:默认选中
-->
    <p>
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

<!--    多选框
        input type='checkbox'
        checked:默认选中
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>编程
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

<!--    按钮
        input type='button' 普通按钮
        input type='image' 图像按钮
        input type='submit' 提交按钮
        input type='reset' 重置
-->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/images/1.jpg">-->
    </p>

<!--    下拉框，列表框

-->
    <p>下拉框:
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>

<!--    文本域
        cols:行
        rows:列
-->
    <p>反馈：
        <textarea name="textarea" id="textarea1" cols="30" rows="10">文本内容</textarea>
    </p>

<!--    文件域
        input type="file" name="files"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
<!--    URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--    数字-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

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

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

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

<!--    自定义邮箱
        正则表达式：https://www.jb51.net/tools/regexsc.htm
-->
    <p>自定义邮箱:
        <input type="text" name="customemail" pattern="[1-9]\d{7,10}@qq\.com">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>
wangzhv
关注
专栏目录
HTML基础知识总结
qq_40046544的博客
11-14 4176
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识点
qq_40046544的博客
07-27 8895
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点总结
weixin_64704029的博客
07-28 2181
html知识点
HTML基础知识点大全
m0_69674158的博客
05-04 6949
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
前端-HTML基础知识详解
qq_52262831的博客
12-23 4983
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
html基础知识
热门推荐
PiShubing的博客
02-11 1万+
html hyperText markup Language! 超文本标记语言 （1） 其中html跟标签 head body是结构化标签 charset是编码字符集 （1）utf-8最常用 (2) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集） （3）unicode万国码 lang=“en,zh” 注释：language en=english zh=...
HTML 基础知识
是芜湖的，更是世界的！
05-10 2200
html基础知识
Html基础知识点整理
m0_53157173的博客
06-15 1934
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML5基础知识
qq_46485137的博客
02-13 6275
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
html基础知识1111
03-26
html基础知识1111
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
html 之 relative 和 absolute
u010194271的博客
10-09 281
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
XHTML 简介
wjs2024的博客
10-04 585
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
html复习
m0_46533814的博客
10-05 577
dl即description-list描述列表，dt即description-term写描述的对象是谁，dd即description-data对该对象的描述内容。：code标签是用来包裹代码片段的，代码的字母一般是等宽的，如不加code，字母不等宽，代码不好看。head标签部分一般放相关设置内容，页面显示的内容是在body中编写，在body标签中body被一些标签划分成有结构的部分。：em即emphasis强调的意思，可用于强调一句话中的某个词，显示样式为斜体，样式可改。：块级元素，表示文本的一个段落。
HTML 常用的块级元素和行内元素
最新发布
u010194271的博客
10-09 363
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
爬虫获取不同数据类型(如JSON，HTML)的处理方法以及图片相对URL地址的转换
2301_80892630的博客
10-05 921
当我们爬取图片的URL地址时，我们要确保它们都是有效的绝对URL，这样就可以直接用这些URL来下载图片了。但是很多时候，它们都不是绝对URL地址，因此我们需要它进行URL转换。 下面介绍不同的数据类型在python中的处理方法： JSON 获取 JSON 数据：解析 JSON 数据：提取图片 URL 列表：下载图片并保存到本地： 如果网页内容是以 JSON 格式返回的，你可以直接使用 库来获取 JSON 数据，然后解析并保存其中的图片。以下是如何处理 JSON 数据并下载其中的
HTML 之 ＜div＞ 和 ＜span＞
u010194271的博客
10-09 647
div：用于创建大块内容的布局或容器，适合组织页面结构。span：用于在行内对小部分内容进行样式处理或包裹，不改变布局。
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值