html一个案例学会所有常用HTML(H5)标签

简介: html一个案例学会所有常用HTML(H5)标签



 

前言

HTML没有什么难度,无论对于大一开始学的,或者大二进行重新复习都是一样,只要踏实下来就那么稳稳的敲个几遍也就记住了,这里面我没有涉及table标签,因为这个标签有层级结构,当大家掌握到基本入门的时候我再说table,因为到了web前后端考试的时候才会涉及到table的遍历,当然,这个也是分语言的,如果是java就是jsp,但是如果是.NET就会是ASP,我们会根据不同的语言进行讲解,jsp的el表达式遍历table,asp的GridView与repeater都会给大家比较细致的讲解。

超链接我也没添加在这里,就一个【a】字母,这篇文章主要让大家记住一些常用标签的单词,很简单的我就没添加,因为后面用的多,用着用着就都会了。大家踏实一些,将之前落下的补充上,后面都能顺利的听懂整堂的内容了,祝大家都可能顺利的通过考试。

HTML5声明

<!DOCTYPE html>

HTML框架

<!-- lang="en"代表英文,"zh"代表中文 -->
<html lang="en">
</html>

head头部

<head>
</head>

声明编码格式

<meta charset="UTF-8">

告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

网站标题

<title>My First HTML Page</title>

网站正文

<body>
</body>

网站内容的组成

   <!-- 1、文字 -->

   <!-- 2、图片 img -->

   <!-- 3、音频.mp3 -->

   <!-- 4、视频.mp4 -->

   <!-- 5、表单 -->

文字有关标签

<!-- 正斜杠/    反斜杠\ -->

<!-- 文章的标签pre -->

<!-- 段落标签p -->

<!-- 标题h1-h6 -->

<!-- align的属性值left center right -->

<!-- B加粗 I斜体 U下划线 -->

<!-- 标题标签H1-H6 -->

<!-- 分隔符标签hr -->

音频视频标签

   <!-- <video src="8117658.mp3" controls></video> -->

   <!-- <video src="第九套人民广播体操.mp4" controls></video> -->

表单标签与input属性

<!-- 1、input标签中 -->

<!-- 2、type属性对应的属性值 -->

<!-- 3、text文本输入框 -->

<!-- 4、password密码输入框 -->

<!-- 5、单选radio -->

<!-- 6、复选框checkbox -->

<!-- 7、文件选择file -->

<!-- 8、下拉菜单select -->

<!-- 9、多行文本框textarea -->

<!-- 10、提交按钮submit -->

<!DOCTYPE html>
<html>
<head>
    <title>咱们的复习内容HTML5</title>
</head>
<body>
    <!-- 1、文字 -->
    <!-- 2、图片 img -->
    <!-- 3、音频.mp3 -->
    <!-- <video src="3608117658.mp3" controls></video> -->
    <!-- <video src="第九套人民广播体操.mp4" controls></video> -->
    <!-- 4、视频.mp4 -->
    <!-- 5、表单 -->
    <!-- 1、input标签中 -->
    <!-- 2、type属性对应的属性值 -->
    <!-- 3、text文本输入框 -->
    <!-- 4、password密码输入框 -->
    <!-- 5、单选radio -->
    <!-- 6、复选框checkbox -->
    <!-- 7、文件选择file -->
    <!-- 8、下拉菜单select -->
    <!-- 9、多行文本框textarea -->
    <!-- 10、提交按钮submit -->
    <fieldset>
        <legend>表单操作</legend>
        <form action="#" method="get">
            <p>
                <!-- 文本 -->
                <input type="text" name="userName" value="666" readonly/>
            </p>
            <p>
                <!-- 密码 -->
                <input type="password" name="passWord">
            </p>
            <!-- 单选按钮 -->
            <p>
                <input type="radio" name="sex" value="boy" />男
                <input type="radio" name="sex" value="girl" checked/>女
            </p>
            <!-- 复选框-多选框 -->
            <p>
                <input type="checkbox" name="likes">电子游戏
                <input type="checkbox" name="likes" checked>电子小说
                <input type="checkbox" name="likes">改变世界
                <input type="checkbox" name="likes">学会养生
            </p>
            <!-- 文件获取 -->
            <p>
                <input type="file" name="file">
            </p>
            <!-- 选择 -->
            <p>
                <select name="minzu">
                    <optgroup label="少数民族">
                        <option>水族</option>
                        <option>葬爱家族</option>
                        <option>黎族</option>
                        <option>傣族</option>
                        <option>仡佬族</option>
                    </optgroup>
                    <optgroup label="非少数民族">
                        <option value="汉族">汉族</option>
                    </optgroup>
                </select>
            </p>
            <p>
                <!-- 多行文本框 -->
                <textarea rows="10" cols="50"></textarea>
            </p>
            <p>
                <input type="submit" value="提交" />
            </p>
        </form>
    </fieldset>
    <!-- 富文本编辑器 -->
    <!-- 正斜杠/    反斜杠\ -->
    <!-- 文章的标签pre -->
    <!-- 段落标签p -->
    <!-- 标题h1-h6 -->
    <!-- align的属性值left center right -->
    <!-- B加粗 I斜体 U下划线 -->
    <!-- 标题标签H1-H6 -->
    <!-- 分隔符标签hr -->
    <pre>
        dasdasdas 
        dsfds 
        sdfsdfsdf杀东方实际对话\n发送端飞说多了几分lksdf
        sdfsdfsd发斯蒂芬  是方式\r即可的风扇电机福克斯  
         飞的是否会速度较快和福克斯      数据的可接受的
    </pre>
    <b>孔武&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有力</b>
    <i>孔孟    之乡</i>
    <u>孔曰    取义</u>
    <h1 align="center">李白</h1>
    <p align="center">云想
        <font color="red" face="华文行楷">衣裳</font>
        花想容,</p>
    <p align="center">春风拂槛露华浓。</p>
    <p>若非群玉山头见,</p>
    <p>会向瑶台月下逢。</p>
    <h1>I Have A Dream!</h1>
    <h2>I Have A Dream!</h2>
    <h3>I Have A Dream!</h3>
    <h4>I Have A Dream!</h4>
    <h5>I Have A Dream!</h5>
    <h6>I Have A Dream!</h6>
    <hr color="red" size="7" />
</body>
</html>

这里对HTML概述讲解一下:

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1] 超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

HTML由来

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。

相关文章
|
29天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
46 5
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
51 0
|
1天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1天前
|
存储 移动开发 前端开发
|
28天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
36 2
|
28天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
30 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
95 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
173 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便