• HTML基本标签


    HTML 是用来描述网页的一种语言。
    HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    HTML 不是一种编程语言,而是一种标记语言 (markup language)
    标记语言是一套标记标签 (markup tag)
    HTML 使用标记标签来描述网页

    HTML基本标签

    <!DOCTYPE html>

    html5中<!DOCTYPE html>相当于让浏览器以标准模式解析渲染页面,如果你的页面没有DOCTYPE的声明,那么默认就是以怪异模式去渲染解析,那么,在不同的浏览器就会显示不同的样式。
    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 标签之前。

    <html> 与 </html>

    <html>与 &lt/html>标签限定了文档的开始点和结束点,其中由<head>和<body>标签组成。

    <head>与</head>

    <head>与</head>定义html文档的头部,里边的内容并不会给读者显示,只是描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。例如引入css文件。

    <body>与</body>

    <body>与</body>中存放文档的主体内容,用来显示给读者。

    <meta>

    <meta> 标签永远位于 head 元素内部。
    meta标签共有http-equiv和name两个属性。

    <meta name="keywords" content="内容">//这里的content的值中写网站的相关关键字,用来给搜索引擎去搜索。
    <meta name="description" content="内容">//这里的content的值写一些网站的相关介绍,一段描述性的话。
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //指网页打开后经过2秒刷新到url指定的页面,不填url默认为原打开的网页
    <meta http-equiv="content-Type" charset=UTF8">//编码方式
    

    <title>与</title>

    <title>与</title>中的内容显示在浏览器窗口的标题栏或状态栏上,用来定义文档的标题。

    <link>标签用来连接外部资源。

    <link rel="icon" href="    .ico">用来定义浏览器窗口的标题栏或状态栏上的图标。
    <link rel="stylesheet" type="text/css" href="theme.css" />连接样式表
    

    <hn>与</hn>

    标题标签,n可以为1-6.

    <p>与</p>

    段落标签,是块级标签

    <b>与</b>

    加粗文本

    <del>与</del>

    表示删除文本,例如<del>这里是删除</del>会显示为这里是删除

    <ins>与</ins>

    下划线文本,例如<ins>这里有下划线</ins>会显示为这里有下划线

    <br>

    插入一个换行符

    <hr>

    插入一条水平线

    <div>与</div>

    <div>就像是一个盒子,限制了一块区域,里边可以存放其他内容,是块级标签,一般用来通过css定义样式

    <span>与</span>

    <span>和<div>类似,但它是一个内联标签。

    <img>

    img用来插入图片,有很多属性

    <img src="url"  alt="图片未加载成功显示的文本"  title="鼠标悬浮时显示的文本" width="300px" height="400px">
    

    <a>

    超链接标签或者为锚标签

    <a href="https://www.cnblogs.com/" target="_block">博客园</a>//target="_block以一个空白页打开
    <a href="#id">博客园</a>//跳转到id为id的锚
    

    <ul>

    无序列表

    <ul>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
    

    <ol>

    有序列表

    <dl>

    定义列表

    <dl>
     <dt>标题</dt>
       <dd>内容</dd>
       <dt>标题</dt>
       <dd>内容</dd>
    </dl>
    

    <table>

    表格标签

    <table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
    

    th为表头,td为单元格,tr定义表格行
    属性有
    border 定义表格边框宽度
    cellpadding 规定单元边沿与其内容之间的空白
    cellspacing 规定单元格之间的空白
    width 表格宽度
    等。。

    <form>

    属性

    表单标签,用于接收用户的输入,完成与后端的传输
    action属性规定当提交表单时向何处发送表单数据,值为url
    method属性规定用于发送 form-data 的 HTTP 方法。
      get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制
      post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

    元素

    <input>

    属性:type:
         text 文本输入框
         password 密码输入框
         radio 单选框
         checkbox 多选框
         submit 提交按钮
         button 按钮
         file 提交文件:form表单需要加上属性enctype=”multipart/form-data”,请求方式必须是post
         reset 刷新表单,重置表单
       name:表单提交的键名,如一套多选框或单选框的name应该一样
       value:表单提交的值
       checked: 默认被选中
       readonly: 将表单内容设置为只读,即不能修改,但可以选择,可以复制,用于text或password
       disabled:表示禁用该input元素

    <select>  

    下拉选项

    <select>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="天津">天津</option>
      <option value="广州">广州</option>
    </select>
    

    属性:name:键名
       size:显示的选项个数
       multiple:多选
       option中selected属性表示默认被选中

    <textarea> 

    文本域
    属性:name:键名
       rows:行数
       cols:列数

    <label></label> 

    为input元素定义标记
    其中for属性可以指定id,表示与其绑定,点击lable中的内容,会自动转移到绑定的元素中

    <fieldset></fieldset> 

    为表单元素分组

    <form>
      <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text" />
        体重:<input type="text" />
      </fieldset>
    </form>
    

    显示为


  • 相关阅读:
    Springboot + Mybatis 多数据源配置
    构建微服务:Spring boot 入门篇
    IDEA SpringBoot代码修改热部署/加载
    vue-cli知识点
    vuex知识点
    正则基本知识
    多行SQL语句拼成一条数据
    软件的版本控制
    ASP.NET 表单验证实现浅析
    建造者模式
  • 原文地址:https://www.cnblogs.com/sfencs-hcy/p/9812842.html
Copyright © 2020-2023  润新知