HTML浅解

最新推荐文章于 2024-06-15 23:39:45 发布

time_silence

最新推荐文章于 2024-06-15 23:39:45 发布

阅读量38

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/time_silence/article/details/127757012

版权

1、简介

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的；

HTML(HyperText Markup Language):超文本标记语言；

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；

标记语言:由标签构成的语言；

HTML运行在浏览器上，HTML标签由浏览器来解析；

HTML标签都是预定义好的。

前端网站

2、HTML快速入门

1、新建文本文件，后缀名改为 .html;

2、基本结构标签

<!--  结构标签 -->

<html>
    <head>
        <title> </title>
    </head>
    <body>

    </body>
</html>

3、在<body>中定义文字

3、基础标签

4、图片、音频、视频标签

<body>
    <img src="">
    <audio src=""></audio>
    <vidio src=""></vidio>
</body>

5、超链接标签

<a>
    <!--定义超链接，用于链接到另一个资源-->
</a>

部分属性：

href:指定访问资源的URL

target:指定打开资源的方式

_self:默认值，在当前页面打开

_blank :在空白页面打开

6、列表标签

<ol>
<!-- 有序列表   -->
    <li></li>
</ol>
<ul>
<!--    无序列表-->
    <li></li>
</ul>

部分属性：

type：设置前置符号

7、表格标签

<body>
  <table border="1" cellspacing="0" width="500"  >
<!--  定义表格  -->
    <tr height="50" >
<!--   定义行 -->
      <th colspan="2">
<!--  定义表头单元格  -->
       </th>
    </tr>
    <tr align="center">
      <td rowspan="4"> 上午</td>
      <td >早自习
<!--  定义单元格  -->
      </td>
    </tr>
    <tr align="center">
      <td >第一节</td>
    </tr>
    <tr align="center">
      <td >第一节</td>
    </tr>
    <tr align="center">
      <td >第三节</td>
    </tr>
  </table>
</body>

部分属性：

table:

border:规定表格边框的宽度

width :规定表格的宽度

cellspacing:规定单元格之间的空白

tr:

align:定义表格行的内容对齐方式

td:

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

8、表单标签

表单:在网页中主要负责数据采集功能，使用<form>标签定义表单

部分属性：

from:

action:规定当提交表单时向何处发送表单数据，URL

method :规定用于发送表单数据的方式

get:浏览器会将数据直接附在表单的action URL之后。大小有限制 4kb

post:浏览器会将数据放到http请求消息体中。大小无限制
<input type="">用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <from action="#" methed="post">
    <label for="username"> 用户名：</label>
<!--    定义单行的输入字段-->
    <input type="text" name="username" id="username"><br>

    <label for="password"> 密码：</label>
<!--    定义密码字段-->
    <input type="password" name="password" id="password"><br>
<!--   定义单选字段 -->
    性别：
    <input type="radio" name="性别" value="男">男
    <input type="radio" name="性别" value="女">女<br>
<!--    定义复选框-->
    爱好：
    <input type="checkbox" name="happy" value="1">电影
    <input type="checkbox" name="happy" value="2">小说
    <input type="checkbox" name="happy" value="1">音乐<br>
<!--    定义文件上传按钮-->
    头像：
    <input type="file" ><br>
<!--    定义隐藏的输入字段-->
    <input type="hidden" name="我爱你">
    <br>
<!--    select使用-->
    城市:
    <select name="city">
      <option>北京</option>
      <option value="shanghai">上海
      </option><option>广州</option>
    </select>
    <br>
<!--  <textarea>使用  -->
    个人描述:
    <textarea cols="20"rows="5"></textarea><br>
    <!--    定义提交按钮-->
    <input type="submit" value="免费注册" >
<!--    定义重置按钮-->
    <input type="reset">

  </from>

</body>
</html>

呼~，结束