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文件“翻译”成可以识别的信息,即我们所见到的网页。

相关文章
|
24天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
5天前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
12 3
|
11天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
11天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
20天前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
19天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
22 1
|
19天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
29 1
|
13小时前
|
前端开发
常用 HTML 标签元素(表格、表单)
常用 HTML 标签元素(表格、表单)
|
24天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
|
5天前
|
移动开发 HTML5
杨校老师课堂之HTML5动画特效的风车案例
杨校老师课堂之HTML5动画特效的风车案例
11 0