zoukankan      html  css  js  c++  java
  • 前端HTML

    HTML

    超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。

    本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)

    网页文件的扩展名:.html或.htm

    HTML是一种标记语言(markup language),它不是一种编程语言。

    HTML文档

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>css样式优先级</title>
    </head>
    <body>
    
    </body>
    </html>

    html文件打开方式
    方式1:找到改文件选择浏览器打开
    方式2:pycharm内自动打开


    head内常用标签
    title:页面标题
    style:写css代码
    script:内部可以直接写js代码,也可以通过src属性
    引入外部js代码文件
    link:通过href引入外部css文件

    body内标签
    基本标签
    h1~h6:标题标签
    p:段落标签

    特殊符号

    常用标签(******)
    div
    span
    p
    a
    img

    列表标签
    ul>li

    表格标签

    form表单(******):前后端数据交互

    标签分类1:
    双标签 h1~h6 p a
    自闭和标签 img br hr


    标签分类2(******):
    块儿级标签 div h1~h6 p hr br
    独占一行
    块儿级标签能够嵌套块儿级标签和行内标签
    p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
    块儿级标签能够设置长宽

    行内标签 span a img i s b u
    自身内容有多的就占多大
    行内标签不能设置长宽

    HTML 常用标签

    Meta标签

    Meta标签介绍:

    • <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
    • <meta>标签位于文档的头部,不包含任何内容。
    • <meta>提供的信息是用户不可见的。

    body 内常用标签

    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>

    <p>段落标签</p>

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <!--换行-->
    <br>

    <!--水平线--><hr>

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

    mg标签

    <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

    a标签

    超链接标签

    所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

    列表

    1.无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>
    

     2.有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>
    

     3.标题列表

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

       

    表格

    表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
    表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
    表格的基本结构:

    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Egon</td>
        <td>杠娘</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yuan</td>
        <td>日天</td>
      </tr>
      </tbody>
    </table>
    

    select标签

    <form action="" method="post">
      <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
      </select>
    </form>
    

    定义:<label> 标签为 input 元素定义标注(标记)。
    说明:

      1. label 元素不会向用户呈现任何特殊效果。
      2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
    <form action="">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username">
    </form>
    

    textarea多行文本

    <textarea name="memo" id="memo" cols="30" rows="10">
      默认内容
    </textarea>
    
    
    
    
  • 相关阅读:
    在windows桌面显示IP等信息的小工具分享
    oracle,根据查询结果结构创建新表
    Oracle多表关联如何更新多个字段
    我想实现一个通用的配置读写类
    【转】Android程序右上角不显示3个点的菜单
    python发送 IBM lotus Notes 邮件
    当超过端口MTU时
    为什么telnet可以用来检查TCP端口是否正常?
    55+手绘网站设计 – 构建极具创新效果的网站
    炫酷动态静图40例——多图杀猫
  • 原文地址:https://www.cnblogs.com/legend27/p/10945649.html
Copyright © 2011-2022 走看看