HTML5简单入门

最新推荐文章于 2024-09-27 09:37:38 发布
最新推荐文章于 2024-09-27 09:37:38 发布
阅读量330 收藏
点赞数 1
文章标签： html web html5 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangfeiyue12178/article/details/106892497
版权

HTML5简单入门

1. HTML5简介

HTML:超文本语言, HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。

https://baike.baidu.com/item/html5 详见百度百科

2. HTML5基本标签介绍

  • 基本标签

<!DOCTYPE html>
<!-- DOCTYPE 文档类型, 告诉浏览器, 我们要使用什么规范-->
<head>
<!--head 代表网页的头部-->
<title>Title</title>
<!--Title 网页的标题-->
<body>
</body>
<!--body代表网页的主题-->
<html lang="en"></html>
<!-- html主标签, 我们所有的html内容都在这个标签里 -->

  • 标题标签

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

  • 段落标签

<p></p>

  • 换行标签

<br/>

  • 水平线标签

<hr>

  • 字体样式标签

<strong>粗体</strong>
<em>斜体</em>

  • 特殊符号

空格: &nbsp;  大于号:  &gt; 小于号: &lt;  版权符号: &copy;

  • 图片标签

常见的图像格式: JPG  GIF  PNG  BMP
标签:<img src="" alt="" title="" width="" height="">
   src: 图片路径   alt: 图片不显示是提示   title:鼠标悬停显示的文字   width:高   height:宽

  • 超链接标签

<a href="" target=""></a>
href: 跳转路径   target: 跳转页面打开方式 (-blank  在新标签中打开 _self 在自己网页中打开)
 锚链接: 需要一个锚标记, 点击可跳转到标记
  如:<a href="#top">回到顶部</a>
     <a name="top">标记</a>
   点击"回到顶部", 可跳转到"标记所在的位置"
 邮件链接:<a href="mailto:邮件地址" >给我发邮件</a> 输入邮件地址, 点击"给我发邮件"可进行邮件发送功能

  • 视频音频

视频标签:<video src="" controls autoplay></video>
音频标签:<audio src="" controls autoplay></audio>
   src: 视频/音频 文件路径   controls 显示控制条  autoplay: 自动播放

  • 列表标签:

有序列表: 
    <ol>
        <li></li>
        <li></li>
        <li><li>
    </ol>
无序列表:
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
自定义列表:
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
    dl: 自定义列表标签   dt:列表名称   dd:列表内容  

  • 页面结构标签

<header>网页头部</header>
<section>网页主体</section>
<footer>网页脚部</footer>
<nav>导航</nav>

  • 表格标签

<table border="1px">
    <tr>
        <td colspan="2">第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td rowspan="2">第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>
  tr: 行标签  td: 列标签   colspan: 跨列   rowspan:跨行

  • 表单标签

<form action=""  method=""></form> action: 提交地址  method: 提交方式get/post
  输入框:<input type="" name="" value="" placeholder="" required hidden readonly partten="">
    type: 输入框类型
       text:文本框  password:密码框  radio:单选框  checkbox:多选框  button:按钮
       file:文件域  submit:提交按钮  reset:重置按钮 email:输入邮件框  url:输入网址框
       number:数字输入框  range: 滑块   search:搜索框
    name: 名称
    value:默认值
    placeholder:未输入内容时的提示
    required:不能为空
    hidden:隐藏
    readonly:只读
    partten:自定义的正则校验
    maxlength:输入字符长度
    disabled:不可用
  文本域:<textarea name="" cols="" rows="">文本内容</textarea>
    cols: 行   rows:列
  下拉框: <select name="列表名称" id="">
            <option value=""></option>
            <option value=""></option>
            <option value="" selected></option>
            <option value=""></option>
            <option value=""></option>
        </select>
        value: 值  selected:默认选中

  • 内联框架

<iframe src="" name="" frameborder="" width="" height=""></iframe>
src: 嵌入网页路径  name: 名称  frameborder:边框宽度  width: 宽  htight:高
等风,也等你
关注
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
h5(html5)入门
生活不易，喵喵叹气
09-04 3045
h5(html5)基础入门 学习目标 目标????️： 学习PC端网站布局，最终网站：品优购静态网站 精通网页布局，也是我们前端人员必备的技能，为后面学习 Javascript 打下坚实基础 资源网站????： 百度：www.baidu.com W3C：www.w3school.com.cn MDN：https://developer.mozilla.org/zh-CN/ 学习路线 1. HTML 简介导读 目标： 能够说出网页的基本组成 能够说出什么是HTML 能够说出常用的浏览器 能够说出Web
手机操作系统和浏览器发展新趋势
weixin_30725315的博客
03-13 185
在原生应用(Native Apps)大获成功的推动下，手机操作系统业重新洗牌，初步形成了目前iOS、Android和Win8三足鼎立的竞争格局。 在原生应用模式中操作系统的作用至关重要，控制了操作系统就可以控制应用商店，控制移动互联网入口，从而控制整个产业链。 随着网页应用(Web Apps)的兴起，应用程序运行在在Web上，浏览器再次成为主要入口，移动互联网回归...
java面试题及答案（基础题122道，代码题19道）
lv_cha1的专栏
01-28 1172
JAVA相关基础知识 1、面向对象的特征有哪些方面  1.抽象： 抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象，二是数据抽象。 2.继承： 继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了一种明确表述共性的方法。对象的一个新类可以从现有的
第五章：网站网页基础
小正子
12-12 414
1、 HTML（超文本标记语言） 是一种计算机程序语言,专门用来编写 web 网页。 HTML 是一种描述文件格式的语言， 以 标记标识及排列各对象。 <p>是分段格式， 下面文字将换行。 <br>换行标识 。 <pre>..<pre/>按照文本原样显示。 2、 网页设计的原则： 符合用户的需求， 满足用户的需求是最优先的考虑； 有效的使用资源， 网...
web前端知识体系之基础知识 - HTML元素和语言
web前端开发学习教程
10-06 517
1. 文档元信息 元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。 1.1 head head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。 head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个...
H5(html5)入门教程
DAIYA_JIE的博客
09-11 1万+
html零基础01
HTML零基础入门教程完整版
热门推荐
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML5基础入门学习
flower_517的博客
05-15 578
HTML5基础入门学习：学习html5首先要了解什么是html5，然后，我们要下载一个html编辑器，并且要对html各个标签熟练掌握，灵活运用，另外也可以参考一些html资料，比如千锋教育编著的《HTML5从入门到精通》，新手完全可以对照教程去学习html。书中附带视频教程、PPT教程、项目源码等。 html5并不很难学，只是一些简单标签和属性，只要我们认真学习HTML5资料和视频，不用多久就...
HTML5从入门到精通
10-28
本教程《HTML5从入门到精通》旨在帮助初学者快速掌握这一重要的前端技术。 一、HTML5基础知识 HTML5的基本结构包括文档类型声明（<!DOCTYPE html>）、html标签、head标签和body标签。它们构成了一个基本的HTML页面...
HTML5 从入门到精通PDF版本下载.txt
07-17
根据提供的文件信息，本文将对《HTML5 从入门到精通》这一主题进行详细的知识点梳理，以便读者能够更好地理解HTML5的基础与高级应用。 ### 一、HTML5概述 HTML5是超文本标记语言（HyperText Markup Language）的第...
html5+css3从入门到精通
09-07
2. **媒体元素**：HTML5的和标签使得直接在网页中嵌入音频和视频变得简单，不再依赖Flash等插件。 3. **离线存储**：通过离线存储（Offline Storage，如localStorage和sessionStorage），HTML5允许网页在用户离线时...
HTML5+CSS3从入门到精通 源码和示例
09-25
本书“HTML5+CSS3从入门到精通”由Terry Felke-Morris撰写，旨在帮助初学者和有经验的开发者深入理解和掌握这两种技术。 HTML5作为第五代超文本标记语言，其主要改进包括： 1. 新增语义化标签：如、、、等，提高了...
html5入门教程附源码
09-02
这个"html5入门教程附源码"是针对初学者设计的，旨在帮助他们快速掌握HTML5的基础知识并实践编程。 HTML5的主要改进包括： 1. **语义化标签**：HTML5引入了一系列新的语义元素，如、、、、和等，这些标签让网页...
python：基于django的html订单提交页面
我是你大爷
09-23 675
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 496
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
HTML中的padding和margin
最新发布
学无止境
09-27 439
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
网页设计html心得
ikunlxx的博客
09-23 821
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS3。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
html,js,react三种方法编写helloworld理解virtual dom
09-23 576
学习任何一个新语言，好像都从helloworld开始。：）。
HTML5入门基础与实战探索
"《HTML5基础入门.pdf》是一本针对HTML5初学者的入门书籍，主要涵盖HTML5的基础知识，适合新手学习。书中提到HTML5的发展历程，从1991年的HTML开始，历经多个阶段，最终在2009年形成HTML5草案。HTML5不仅仅是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

等风,也等你

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值