请选择 进入手机版 | 继续访问电脑版
我的账户
啄木鸟学院

专注软件测试菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

5分钟了解HTML

[复制链接]
chelang 发表于 2020-2-22 14:57:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
首先搞清楚HTML的一些基础知识

一、什么是 HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如和
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

三、HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是使用标签来解释页面的内容。
好了,废话不多说,先来看一个例子,打开记事本输入以下字段,保存为html格式:

图片1.png

HTML中常用标签的介绍
1HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的,如:<h1>这是标题1</h1>
2HTML 段落是通过 <p> 标签进行定义的。
3HTML 链接是通过 <a> 标签进行定义的,如
<ahref="https://www.dota2.com.cn/index.htm">DOTA2官网</a>
4HTML 图像是通过 <img> 标签进行定义的,如
<img src="w3school.jpg"width="104" height="142"/>
5<font> 规定文本的字体、字体尺寸、字体颜色:<font size="3" color="red">This is sometext!</font>
6)如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签,<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签
7)表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
8)注释标签 <!-- --> 用于在 HTML 插入注释
9HTML中有两个分组标签,可以通过<div> <span> HTML 元素组合起来。HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器;<div>元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行;如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性;<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
10HTML <span> 元素是内联元素,可用作文本的容器,<span> 元素也没有特定的含义,当与CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
11<script> 标签用于定义客户端脚本,比如JavaScriptscript 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

了解了这么多,来个实例看看。这里随意编写一个HTML网页,大家可以参考。

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
       <title>selenuim弹窗</title>
   </head>
   <body>
       <divalign="center">
       <h4>一起测试吧</h4>
       <input type="button"value="带输入框的弹窗"/>
       <span id="textSpan"></span>
       <div>
        <font color="red" size="6">
        <p>DOTA是什么:
        <a href="https://www.dota2.com.cn/index.htm">DOTA2官网</a>
        <a href="https://www.dota2.com.cn/download/">下载游戏</a>
       </p>
       <p>这里的游戏很好玩,里面有吃鸡哦:
       <ahref="https://store.steampowered.com/">STEAM</a>
       </p>
       </div>
   </body>
   <script>
       function jianjian(){
           document.getElementById("textSpan").innerHTML="";
           con = prompt("输入1为OK,输入2为false");
           if(con==1){
               document.getElementById("textSpan").innerHTML="<fontstyle='color: green;'>OK</font>";
           }else if(con==2){
               document.getElementById("textSpan").innerHTML="<fontstyle='color: green;'>都说了false还输入啊</font>";
           }else{
               document.getElementById("textSpan").innerHTML="<fontstyle='color: red;'>您没有按要求输入,请重新输入</font>";
           }
       }
   </script>
</html>



分享本篇文章给更多人:


63.9K
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝0

帖子10

发布主题
关注我们
专注软件测试菁英教育

客服电话:029-61859806

客服时间:9:00-21:00

客服邮箱:vip@giteach.cn

西安校区:未央区凤城九路海博广场B座

成都校区:高新区天府二街蜀都中心1期1号楼

啄木鸟学院 - 专注软件测试菁英教育!( 陕ICP备20001493号-1 )

版权所有 © 西安菁英教育科技有限公司 2016-2020