菁英科技(卓目鸟学苑)- 专注软件测试菁英教育

标题: 5分钟了解HTML [打印本页]

作者: chelang    时间: 2020-2-22 14:57
标题: 5分钟了解HTML
首先搞清楚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格式:

(, 下载次数: 374)

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>




作者: 汪喵喵喵    时间: 2023-2-14 16:24
棒棒棒棒




欢迎光临 菁英科技(卓目鸟学苑)- 专注软件测试菁英教育 (http://www.zmnxy.com/) Powered by Discuz! X3.4