01-HTML基本介绍

01-HTML基本介绍

  

  本篇主要介绍HTML相关标签的使用,以及其常用标签的作用等介绍。

  一、HTML的介绍

  HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。

  其基本结构为:

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <title>HTML标题title>
head>
<body>
    <h1>hello worldh1>
body>
html>

  这便是一个最简单的HTML文档,其主要包含:

  :第一行是文档声明;

   :“”标签和最后一行“”定义html文档的整体;

   :“”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,

  头部常加的:https://blog.csdn.net/chunchun1230/article/details/79925886

  :“”内编写网页上显示的内容。

  

  二、HTML常用标签

 通常我们将HTML标签分为块元素标签和内联元素标签,即:

  块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
  内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。

 2.1 常见的块元素标签:

   1、标题标签: h1 -- h6 ,即一级标题到六级标题;

   2、段落标签:

   4、盒子标签: 

,通常用于布局;

   5、列表标签:

<ul>
    <li>列表标签li>
    <li>列表标签li>
ul>

   6、表格标签

<table> 
    <tr>  
        <th>nameth>   
        <th>ageth>
        <th>genderth>
    tr>
    <tr>
        <td>alextd>  
        <td>35td>
        <td>maletd>
    tr>
table>

   7、表单标签

<form action="http://www..." method="get">
    <p><label>姓名:label><input type="text" name="username" />p>
    <p><label>密码:label><input type="password" name="password" />p>
    <p>
        <label>性别:label>
        <input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" />p>
    <p>
        <label>爱好:label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    p>
    <p>
        <label>照片:label>
        <input type="file" name="person_pic">
    p>
    <p>
        <label>个人描述:label>
        <textarea name="about">textarea>
    p>
    <p>
        <label>籍贯:label>
        <select name="site">
            <option value="0">北京option>
            <option value="1">上海option>
            <option value="2">广州option>
            <option value="3">深圳option>
        select>
    p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    p>
form>
表单标签

  1、

标签 定义整体的表单区域,属性:action属性 定义表单数据提交地址,method属性 定义表单提交的方式,一般有“get”方式和“post”方式;

  2、

  3、标签 定义通用的表单元素;

  ① type属性
  • type="text" 定义单行文本输入框
  • type="password" 定义密码输入框
  • type="radio" 定义单选框
  • type="checkbox" 定义复选框
  • type="file" 定义上传文件
  • type="submit" 定义提交按钮
  • type="reset" 定义重置按钮
  • type="button" 定义一个普通按钮

  ② value属性 :定义表单元素的值

  ③ name属性: 定义表单元素的名称,此名称是提交数据时的键名

  4、