Web安全基础_HTML

目录

什么是HTML?

什么是HTML标签?

标签类型

HTML基本模板

 框架示例

HTML常用标签

HTML表格

 表格示例

HTML表单

什么是表单?

 如何定义一个表单

 表单控件(元素)

HTML_iframe


什么是HTML?

html是一种前端语言, 在浏览器中, 我们看到的页面内容就是由html来表示的

什么是HTML标签?

html标签:html是一种标签语言, 由一个左括号'<'和一个右括号'>'以及内容组成的称为一个标签 例如:<p>则被称为一个p标签

标签类型

1.单标签:由一个标签组成, 而不需要闭合标签 例如:<meta>, <hr />
2.双标签:由'开始标签'和'结束标签'组成 例如 <head> </head>

HTML基本模板

html基本框架:
    <!DOCTYPE html>声明文档,告知浏览器html版本
    前后闭合的html标签, 声明闭合内部内容均为html标签
    head标签, 表示html代码的头部, 内部有title(标题), meta(页面元信息)等标签
    body标签, 表示html代码的身体部分, 一般页面所呈现的具体内容则由body内的标签来表示

 框架示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML常用标签

单标签:
            <hr /> 水平线标签
            <br /> 换行标签
双标签(以下标签均需要闭合):
            <h1>: 标题 (用h 和 数字表示, 数字越小, 标题的字体越小)
            <p>: 段落标签
            <span>: 行内内容标签, 可以用于文字的控制
            <div>: 块级元素
            <a>: 超链接标签  从一个页面跳转到另一个页面
            <img>: 在页面中引入图片资源
            <tr>:行标签
            <td>:列标签
            <input>:表单
注释:
            <!--
            注释   不会显示在前台页面, 但是会出现在源代码中
            -->
特殊字符(实体):
            空格: &nbsp; 实体编号: &#160
            < 小于号: &lt; 实体编号: &#60
            > 大于号: &gt; 实体编号: &#60
            " 双引号: &quot; 实体编号: &#34
            ' 单引号: &apos; 实体编号: &#39

HTML表格

<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义列
属性: colspan="数字" 跨多少列

         rowspan="数字"跨多少行

 表格示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义列
    <table border="1">
        <tr>
            <td>1,1 </td>
            <td>1,2 </td>
            <td>1,3 </td>
        </tr>
        <tr>
            <td rowspan="2">2,1 </td>  <!-- 横跨2行 -->
            <td colspan="2">2,2 </td>  <!-- 横跨2列 -->
        </tr>
        <tr>
            <td>3,2 </td>
            <td>3,3 </td>
        </tr>
    </table>
</body>
</html>

效果图: 

HTML表单

什么是表单?

搜索框
登录框
文件上传
注册
留言板

表单的作用:

向服务器提交信息
搜集用户信息

 如何定义一个表单

<form></form>

form的属性有:

        action  数据提交到服务器的url, 如果为空, 提交到当前页面, 也可以采用绝对路径和相对路径
        method 提交方法  Get Post

        enctype
                1.application/x-www-form-urlencoded 默认值, 特殊字符等都可以提交
                2.multipart/form-data 上传文件时, 必须要写

 表单控件(元素)

表单本身是一个框架, 表单里会有很多控件(元素)

<input />  单标签
         type 属性:
                 password    密码框
                 text        文本框
                 radio       单选框
                 checkbox    复选框
                 reset       重置按钮
                 file        文件域
                 hidden      隐藏内容

下拉列表<select>

<select> 

        <option>xxxxx内容</option>

<select>

文本域 <textarea>

        示例:<textarea name="xy"></textarea>

HTML_iframe

作用:在一个页面中包含另一个页面

用法示例:

<iframe src="https://www.bilibili.com/" ></iframe>

显示效果:

猜你喜欢

转载自blog.csdn.net/qq_58793845/article/details/124615076