认识HTML

最新推荐文章于 2024-08-21 20:15:01 发布
最新推荐文章于 2024-08-21 20:15:01 发布
阅读量37 收藏
点赞数
分类专栏： HTML 文章标签： html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69005620/article/details/132251078
版权
本文详细介绍了HTML的基本概念，包括其结构、常用标签如标题、段落、图像、链接、列表、表格、表单等内容，并配以实例和练习，帮助读者理解并学习如何构建简单的网页。
摘要由CSDN通过智能技术生成

走进HTML

文章目录

什么是HTML

HTML

  • Hyper Text Markup Language(超文本标记语言)

HTML基本结构

<html><!--根标签-->
    <head>
        <title>我的第一个网页</title>
        <!-- 网页头部 -->
        </head>
        <body>
            我的第一个网页
            <!-- 主体部分 -->
            </body>
    </html>

注意

<body>、</body>等成对的标签，分开叫开放标签和闭合标签
单独呈现的标签（空元素），如<hr/>;意为/来关闭空元素

网页的基本标签

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

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题
段落标签
<P>...</P>

...

换行标签
<br/>

水平线标签
<hr/>
字体样式标签
加粗:<strong>...</strong>
斜体:<em>...</em>

加粗:加粗
斜体:斜体

注释和特殊符号
特殊符号字符实体示例
空格&nbsp ;```百度 
大于号(>)> &gt ;如果时间&gt ;晚上6点，就坐车回家
小于号(<)< &lt ;如果时间&lt ;早上7点，就走路去上学
引号(")" &quot ;W3C规范中，HTML的属性值必须用成对的&quot ;引起来
版权符号@© &copy ;&copy ;2008-2018课工场
图像标签
常见的图像格式
  • JPG
  • GIF
  • PNG
  • BMP

在这里插入图片描述

链接标签

在这里插入图片描述

常用的超链接
页面间链接
  • 从一个页面链接到另一个页面
锚链接
  • 从A页面的甲位置跳转到本页中的乙位置
  • 从A页面的甲位置跳转到B页面中的乙位置

创建步骤

  • 创建跳转标记
<a name="marker">乙位置</a>

乙位置

  • 创建跳转链接
<a href="#marke">甲位置</a>

甲位置

功能性链接
  • 电子邮箱
  • QQ
  • MSN
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

示例邮件链接
联系我们

列表的分类
无序列表
<ul><!--声明无序列表-->
<li>范冰冰演藏族女孩</li><!--声明列表项-->
<li>装死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>

示例:无序列表
热搜

  • 范冰冰演藏族女孩
  • 装死两个人后自拍
  • 诗隆甜蜜出游
  • 一线城市楼市退烧
有序列表
<ol><!--声明有序列表-->
<li>范冰冰演藏族女孩</li><!--声明列表项-->
<li>装死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>

热搜

  1. 范冰冰演藏族女孩
  2. 装死两个人后自拍
  3. 诗隆甜蜜出游
  4. 一线城市楼市退烧
定义列表
<dl><!--声明定义列表-->
    <dt>水果</dt><!--声明列表项-->
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd><!--定义列表项内容-->
    
</dl>
水果
苹果
桃子
李子
蔬菜
白菜
黄瓜
西红柿
表格
  • 为什么使用表格
    • 简单通用
    • 结构稳定
表格的基本语法
<table>
    <tr>
        <th>1行1列的标题</th>
        <th>1行2列的标题</th>
        <th>1行3列的标题</th>
    </tr>
    <tr>
        <td>1行1列的单元格</td>
        <td>1行2列的单元格</td>
        <td>1行3列的单元格</td>
    </tr>
    <tr>
        <td>2行1列的单元格</td>
        <td>2行2列的单元格</td>
        <td>2行3列的单元格</td>
    </tr>
</table>
1行1列的标题1行2列的标题1行3列的标题
1行1列的单元格1行2列的单元格1行3列的单元格
2行1列的单元格2行2列的单元格2行3列的单元格
表单在网页中的应用
表单语法
<from method="post" action="result.html">
 <p>名字:<input name="name" type="text"/></p>
 <p>密码:<input name="pass" type="password"/></p>
 <p>
 <input type="submit" name="Button" value="提交"/>
 <input type="reset" name="Reset" value="重填"/>
 </p>
 </from>

名字:

密码:

表单元素格式

在这里插入图片描述

input元素类型
  • 文本框————text
  • 密码框————password
  • 单选按钮————radio
  • 复选框————checkbox
  • 列表框————select、option
  • 按钮————reset、submit、button
  • 多行文本域————textarea
  • 文本域————file
表单的高级应用
影藏域hidden
<input type="hidden" value="666" name="userid"/>
只读和禁用

在这里插入图片描述

练习

练习1：制作《清平乐》

清平乐

年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！

今年海角天涯，萧萧两鬓生华。

看取晚来风势，故应难看梅花。

练习2：制作京东新闻资讯页面

在这里插入图片描述

看不见的完美硬币:细节的负担

创新公司皮克斯的启示

图片

细节从来都是个好东西，完美的细节往往给我们赢得事业上的胜利。

但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。

怎么打造完美的细节？又怎么赢得商业上的利益，皮克斯总裁艾德•卡特姆为我们解答。

看不见的完美硬币:细节的负担

练习3：制作音乐排行榜

在这里插入图片描述

音乐排行榜

  1. 潇洒走一回
  2. 偏偏喜欢你
  3. 酒干倘卖无
  4. 不说再见
  5. 舍不得你
  6. 请跟我来
练习4：制作人人网注册页面

在这里插入图片描述

人人网，中国 最真实，最有效的社会平台，加入人人网，找回老朋友，结交新朋友。

电子邮箱:

设置密码:

真实姓名:

性别

生日: 1991 1992 1993 1994 1995 年 12 11 10 9 8 7 月 31 30 29 28 日

为什么要填写我的生日？

我现在: 学生 老师

ed="selected">11 10 9 8 7 月 31 30 29 28 日

为什么要填写我的生日？

我现在: 学生 老师

林诺辞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
初识HTML5，认识html
03-05
【初识HTML5，认识HTML】 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是用于创建网页的标准标记语言。自2014年正式发布以来，HTML5已经成为现代网页开发的核心，它极大地提升了用户体验，...
认识HTML语言PPT优秀资料.ppt
11-16
HTML，全称Hyper Text Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML语言通过一系列的标签来定义网页的结构和内容。它起源于1990年，自那时起就成为了World Wide Web上信息表示的基石。...
〖大前端 - 基础入门三大核心之 html 篇④〗- 初步认识html网页文件与HTML5骨架
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-01 2万+
在前导课中我们大致了解了”前端“行业和技术，也安装好了开发环境，了解了互联网的基本原理，可以说我们已经迈出了进入前端开发行业的第一步。但这还远远远远不够，从今天开始正式进入前端开发技术的学习，从认识HTML网页文件开始，一起加油吧！
01.认识HTML及常用标签
2301_80401457的博客
05-14 1928
标题1描述内容1111标题2描述内容2222无序列表ul {li {北京上海广州
重新认识HTML系列003——base标签详解
林中路
06-09 6246
HTML-base标签详解 文档查看 属性说明href文档中说此属性是“用于文档中相对URL地址的基础URL”，不好理解，我们来做几个实验。实验一base-href-1.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base-href实验1：不设置base标签</title>
重新认识HTML系列001——html根元素详解
林中路
06-09 5032
html根元素详解 文档查看 html作为HTML页面的根元素，根据文档，其原来有三个属性：manifest,version,xmlns ，由于新的版本更替，前两个已经不用了，我们来讲一下xmlnsxmlns它的作用是指派XML的命名空间。关于XML的命名空间，这里有详尽的教程：XML命名空间通过该教程，我们明确了以下几点： XML的命名空间解决了XML文件中标签命名冲突的问题 XML命名空间属
重新认识HTML中的p标签
gaohuanjie的专栏
11-18 3969
重新认识HTML中的p标签
html语言中标记h1代表什么,认识HTML中h1h2h3h4标签
weixin_39932939的博客
05-30 4459
H1 H2 H3 H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。一、搜索引擎下看h1标题标签针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字，搜索引擎也会格外注重你所注重关键字与内容，但切记无滥用。二、Html h1 h2 h3 h4用法HTML代码片段：最重要的标题H1次要栏目或标题-小标题H2再次要...
2 认识HTML标签（1）
蔷薇岛少年的博客
05-15 8824
2.1 语义化，让你的网页更好的被搜索引擎理解 这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。 什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理），比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段
HTML初步认识
darkcode007的博客
12-16 2418
HTML初步认识本篇博客给大家带来html最基础的东西，也就是初步认识html，打算从以下几个方面给大家介绍： 认识什么是纯文本文件txt HTML是负责描述文档语义的语言 HTML骨架和基本语法 可能大家会认为这纯文本文件和html没啥关系吧，我要告诉大家的是，虽然这的确和html没多大关系，但对纯文本文件的理解有助于更加深刻的去理解html，好，接下来我将一一给大家介绍关于html初步认识的这三
HTML详解——初识html（一）
qq_46362763的博客
03-12 2844
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它是专门制作网页的计算机语言。提示：以下是本篇文章正文内容，下面案例可供参考。
认识HTML的盒子模型/＜div＞标签/通过css设置边框的样式与属性/css对边框的颜色设置与综合写法/学习笔记
No1banana的博客
01-24 3373
一、认识盒子模型 盒子模型：在网页中，承载内容的区域 网页中盒子模型拥有内边距、边框、外边距、宽和高 盒子模型用于划分区域和承载内容，使网页的元素清晰的排列 二、div标签 div标签是一个块容器标签（可以设置宽度和高度） div标签可以把网页分割为独立的部分，用来实现网页的规划和布局 大多数HTML标签都可以嵌套<div>标签中可以嵌套多层<div> 可以替代大多数块容器标签，如：<h3>或<p> 示例代码 <!doctype html&gt
02-认识HTML.md
11-24
- HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言。 - HTML 不是一种编程语言，而是一种标记语言 (markup language) - 标记语言是一套标记标签 (markup tag)
认识HTML语言 认识HTML语言
06-30
### HTML语言概述与基础知识 #### 1. HTML简介 HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。自1990年以来，HTML一直是万维网（World Wide Web, WWW）上信息展示的主要...
带你认识HTML5中的WebSocket
09-28
WebSocket是HTML5中引入的一种全新通信协议，旨在提供低延迟、高效能的双向通信机制，使得客户端和服务器之间能够实时交换数据。与传统的HTTP不同，WebSocket建立一次连接后，双方可以持续保持通信状态，不再需要像...
html转vue项目
qq_38880880的博客
08-19 323
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 763
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 718
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
Java学习Day33：HTML 第三章：挟魂崖
最新发布
weixin_51721783的博客
08-21 715
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
HTML基础入门：认识HTML标签和基本概念
HTML标签入门 HTML（HyperText Markup Language），即超文本标记语言，是一种用于创建网页的标记语言。它是万维网的基础语言，用于设计和构建网页的结构和内容。HTML不是一种编程语言，而是一种标记语言，用于描述...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值