01.HTML

2024年4月20日 83次阅读 来源: 馨吖

网页的组成

  • 结构（HTML）：超文本标记语言
  • 表现(CSS):层叠样式表
  • 行为(JavaScript):脚本语言

一个良好的网页要结构、表现、行为三者分离

HTML简介

是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容

  • HTML文档也叫做 web 页面

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML基本语法

  • HTML中的标签分为成对出现的标签和自结束标签
  • HTML中的标签不区分大小写，但是建议小写
  • 标签可以嵌套但不能交叉嵌套
  • 成对出现的标签必须正确关闭
  • 属性必须有值且值必须加引号
  • 注释不能嵌套
<!-- 1.标签的分类 -->
    <!-- 
        标签分为成对出现的标签和自结束标签两种
            -成对出现的标签：如：<html></html> 、<head></head> 、 <p></p>
            -自结束标签：如：<img />、<input /> 、<br/>
     -->
    <!-- 2.标签不区分大小写 -->
    <P>标签不区分大小写，但建议小写</p>
    <!-- 3.标签可以嵌套但不能交叉嵌套 -->
    <div><p>标签可以嵌套，但不能交叉嵌套</div></p>
    <!-- 4.标签必须正确关闭 -->
    <p>成对出现的标签必须正确关闭</p>
    <!-- 5.属性必须有值，且属性值必须加引号 -->
    <font color="red">我要红</font>
    <!-- 属性值没有加引号 -->
    <font color=red>我要红2</font>
    <!-- 属性没有值 -->
    <font color="">我要红3</font>
    <!-- 6.注释不能嵌套 -->
    <!-- 注释的快捷键是：Ctrl+shift+/ -->
    <!-- <!-- 我是嵌套的注释 --> -->

HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=”value”。
属性描述
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)

HTML常用标签

标题标签

<h1></h1> ~ <h6></h6>

div标签

<div>我是div标签，我主要用来布局，我默认占用浏览器的一整行</div>

p标签

<p>我是一个段落，我默认也是占用浏览器的一整行，而且前后要空一行</p>
<br> 标签换行（新行)：
<p>这个<br>段落<br>分行</p>

转义字符

小于号：&lt;    大于号：&gt;    空格：&nbsp;    版权符：&copy;

列表

无序列表
<ul>
    <li>网页</li>
    <li>新闻</li>
    <li>贴吧</li>
</ul>
有序列表
<ol>
    <li>网页</li>
    <li>新闻</li>
    <li>贴吧</li>
</ol>

图片

<img alt="" src="/images/..." width="258" height="39" />
    • 通过img标签向网页中插入一张图片
    • alt属性：用来设置当图片无法显示时的描述性信息
    • src属性：用来设置图片的路径
    • 在相对路径中，通过../来返回上一级目录，返回多级目录使用多个../

超链接

<a href="http://..." target="_blank">这是一个链接</a>
    • 使用a标签来创建一个超链接
    • href属性：用来设置要跳转的页面的地址
    • targe属性：用来设置要跳转的页面在何处打开
        • _self：在当前窗口打开，默认值
        • _blank：在新的窗口打开

表格

标签描述
table定义表格
th定义表格的表头
tr定义表格的行
td定义表格单元
caption定义表格标题
colgroup定义表格列的组
col定义用于表格列的属性
<!-- 使用table标签来创建一个表格 -->
    <table border="1">
         <!-- 通过tr标签来表示表格中的行 -->
         <tr>
             <!-- 通过th标签来表示表格中的表头 -->
             <th>姓名</th>
             <th>阵营</th>
             <th>职业</th>
             <th>武器</th>
         </tr>
         <tr>
             <!-- 通过td标签来表示表格中的列（单元格） -->
             <td>刘备</td>
             <!-- 跨行合并单元格使用rowspan属性来设置 -->
             <td rowspan="4" align="center">蜀</td>
             <td>蜀汉集团董事长</td>
             <td>双股剑</td>
         </tr>
         <tr>
             <!-- 通过td标签来表示表格中的列（单元格） -->
             <td>诸葛亮</td>
<!--             <td>蜀</td> -->
             <!-- 跨列合并单元格使用colspan属性来设置 -->
             <td colspan="2" align="center">蜀汉集团CEO</td>
<!--             <td>破扇子</td> -->
         </tr>
         <tr>
             <!-- 通过td标签来表示表格中的列（单元格） -->
             <td>关羽</td>
<!--             <td>蜀</td> -->
             <td>荆襄总裁</td>
             <td>青龙偃月刀</td>
         </tr>
         <tr>
             <!-- 通过td标签来表示表格中的列（单元格） -->
             <td>张飞</td>
             <!--<td>蜀</td> -->
             <td>阆中销售经理</td>
             <td>丈八蛇矛</td>
         </tr>
    </table>

表单

表单是一个包含表单元素的区域。表单本身并不可见。

from

标签描述
form定义供用户输入的表单

属性：

  • Action 属性

    action 属性*定义在提交表单时执行的动作。

    向服务器提交表单的通常做法是使用提交按钮。

    通常，表单会被提交到 web 服务器上的网页。

    在上面的例子中，指定了某个服务器脚本来处理被提交表单：

    <form action="action_page.java">

    如果省略 action 属性，则 action 会被设置为要跳转的页面。

  • Method 属性

    method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

    <form action="action_page.java" method="GET">

    <form action="action_page.java" method="POST">

    GET（默认方法）：

    ​ 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

    ​ 当您使用 GET 时，表单数据在页面地址栏中是可见的：

      `action_page.php?firstname=Mickey&lastname=Mouse`

    ​ 注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

    POST：

    ​ 如果表单正在更新数据，或者包含敏感信息（例如密码）。

    ​ POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

属性描述
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）。
action规定向何处提交表单的地址（URL）（提交页面）。
autocomplete规定浏览器应该自动完成表单（默认：开启）。
enctype规定被提交数据的编码（默认：url-encoded）。
method规定在提交表单时所用的 HTTP 方法（默认：GET）。
name规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate规定浏览器不验证表单。
target规定 action 属性中地址的目标（默认：_self）。
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

表单元素

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

input

类型：

标签描述
input定义输入域
text文本输入的单行输入字段
password定义密码字段
chekbox定义复选框
radio定义单选按钮输入（选择多个选择之一）
submit定义提交按钮（提交表单）
reset定义重置按钮

属性：

属性描述
type表单项的类型
name为控件命名，以备后台程序用
value提交数据到服务器的值（后台程序使用）
selected设置默认被选中

select

定义下拉列表：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi" selected="selected">Audi</option>
</select>

<option> 元素定义待选择的选项.

列表通常会把首个选项显示为被选选项.

selected 属性来定义预定义选项。

textarea

定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30"> textarea </textarea>

button

定义可点击的按钮:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<body>
    <!-- 通过form标签创建一个表单 -->
    <!-- action属性：用来设置服务器的地址 -->
    <!-- 通过method属性可以设置表单提交的请求的方式，可选值有GET和POST -->
    <form action="success.html" method="post">
        <!-- 1.表单中的表单项通过input标签表示，表单项的类型通过input标签中的type属性来指定 -->
        <!-- 2.表单项必须设置name属性值，用户输入的数据通过name属性值进行携带，以键值对的形式发送到服务器，
                如：username=admin89&password=999999 
        -->
        用户名：<input type="text" name="username"><br/><br>
        密码：<input type="password" name="password"><br><br>
        <!-- 
            1.要保证单选按钮单选，必须将它们设置为一组，即将它们的name属性值设置为同一个
            2.单选按钮提交的是value属性值，所以必须设置value属性值
            3.通过checked="checked"设置默认被选中
         -->
        性别：<input type="radio" name="gender" value="man" checked="checked">男
            <input type="radio" name="gender" value="woman">女<br><br>
            <!-- 
            1.必须将复选框它们设置为一组，即将它们的name属性值设置为同一个
            2.复选框提交的是value属性值，所以必须设置value属性值
            3.通过checked="checked"设置默认被选中
         -->
        你的爱好： <input type="checkbox" name="hobby" value="money">钱
               <input type="checkbox" name="hobby" value="beauty" checked="checked">美女
               <input type="checkbox" name="hobby" value="sleeping">睡觉
               <br><br>
        选择列表：
            <select name="star">
                <!-- 如果没有指定value属性值，提交的是option中的文本值，如果设置了value属性值，提交的就是value属性值 -->
                <option value="bdyjy">one</option>
                <option>two</option>
                <!-- 通过selected="selected"设置默认被选中 -->
                <option selected="selected">three</option>
                <option>four</option>
                <option>five</option>
                <option value="fbb">six</option>
            </select>
             <br><br>
             <input type="reset">
        <!-- 通过value属性值设置按钮中显示的文本 -->
        <input type="submit" value="登录">
    </form>
</body>
    原文作者：馨吖
    原文地址: https://segmentfault.com/a/1190000019559440
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞