zoukankan      html  css  js  c++  java
  • HTML基础

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言 (Hyper Text Mark-up Language)
    • 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 使用<!--  注释的内容  -->进行注释
    • Doctype 告诉浏览器使用什么样的 html 或 xhtml 规范来解析 html 文档(推荐:<!DOCTYPE html>)

    HTML 标签

    大多数 HTML 元素被定义为块级元素或内联元素:
    块级元素(block level element):块级元素在浏览器显示时,通常会以新行来开始(和结束)。

    • div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)

    行内元素(inline element):内联元素在显示时通常不会以新行开始。

    • span(白板)

    标签之间可以嵌套
    标签存在的意义,css 操作,js 操作

    • 标签分类
              自闭合标签
                  <meta charset="UTF-8">
              主动闭合标签
                  <div></div>

     

    • head标签

    Meta(metadata information):
    提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

        1.页面编码(告诉浏览器是什么编码)
         < meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

        2.刷新和跳转
             刷新:< meta http-equiv=“Refresh” Content=“30″>

            跳转:< meta http-equiv=”Refresh“ Content=”5; Url=https://www.cnblogs.com/dbf-/ />

        3.关键词
         < meta name="keywords" content="blods,Python,html" >

        4.描述
         例如:cnblogs

        5.X-UA-Compatible

    Title
    网页头部信息

    Link
         css:
         < link rel="stylesheet" type="text/css" href="css/common.css" >

        icon:
         < link rel="shortcut icon" href="image/favicon.ico">

    Style
         在页面中写样式

        例如:
             < style type="text/css" >
             .bb{
                   background-color: red;
                }
             < /style>
    Script
        引进文件:
         < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

        写js代码:
         < script type="text/javascript" > ... </script >

     

    • body标签
               图标,  &nbsp;(空格),&gt;(>),&lt;(<)
               <p></p>段落
               <br/>换行

    h 系列标签:

    标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

    <h1> 定义最大的标题。<h6> 定义最小的标题。

    浏览器会自动地在标题的前后添加空行。

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

     

    div 标签:

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

    <div>内容</div>

     

    span 标签:

    HTML <span> 元素是内联元素,可用作文本的容器。

    <span>文本内容</span>

     

    form, input 标签:

    HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单。

    表单元素指的是不同类型的 input 元素:文本输入、密码输入、复选框、单选按钮、提交按钮等等。

    - 当input标签disabled以后就无法被提交到服务器,可以使用readonly

    表单标签:action=http://localhost:9999(表单发送的地址) enctype="multipart/form-data"(支持文件传输)

    文本输入:type=”text” name=”user”(给输入文本起名) value=""(设定文本框的默认值) disabled="disabled"(文本框不可编辑)placeholder=""(当文本框空时显示的提示)

    密码输入:type=”password”(不显示输入内容) name=”psw”(给输入文本起名)

    提交按钮:type="submit" value="提交"(按钮上显示的文字)

    重置按钮:type="reset"(将表单初始化) value="提交"(按钮上显示的文字)

    <form action="http://localhost:9999">
        <div>
            <input type="text" name="user" value="default user"/><br/>
            <input type="password" name="psw"/><br/>
    
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
        </div>
    </form>

     

     

    列表选择:name="city"(起名),value="1"(如果选中,返回”1”)

    单选框:type="radio" name="gender"(相同的name互斥,实现单选) value="3"(如果选中,返回”3”) checked="checked"(默认勾选)

    多选框:type="checkbox" name="hobby" value="1"  checked="checked"(默认勾选)

    按钮:type="button"(不能提交表单) value="按钮"(按钮上显示的文字)

    <form action="http://localhost:9999" enctype="multipart/form-data">
        <p>地区:</p>
    <!--    选择列表-->
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    <!--    单选-->
        <p>性别:</p>
        男:<input type="radio" name="gender" value="1"/><br/>
        女:<input type="radio" name="gender" value="2"/><br/>
        其他:<input type="radio" name="gender" value="3" checked="checked"/><br/>
    <!--    多选-->
        <p>爱好:</p>
        篮球:<input type="checkbox" name="hobby" value="1" checked="checked"/><br/>
        足球:<input type="checkbox" name="hobby" value="2"/><br/>
        排球:<input type="checkbox" name="hobby" value="3"/><br/>
        台球:<input type="checkbox" name="hobby" value="4"/><br/>
        <input type="button" value="按钮"/>
    </form>

     

    传送文件:type="file" name="fname"

    文本域:<textarea> 元素定义多行输入字段

    <form action="http://localhost:9999" enctype="multipart/form-data">
        上传文件:<input type="file" name="fname"/><br>
        <textarea>默认显示内容</textarea>
    </form>

     

    下拉菜单:<select> <option>

    <select>:下拉菜单标签

    form属性:与form(ID)绑定

    required属性:提交表单时必须有选择

    multiple属性:可以多选

    size属性:一次显示的选项数

    <option>:菜单中选项标签

     1 <form id="f1">
     2     <select name="select_tag" multiple="multiple" size="6" required="required" form="f1">
     3         <option value="1">1</option>
     4         <option value="2">2</option>
     5         <option value="3">3</option>
     6         <option value="4">4</option>
     7         <option value="5">5</option>
     8         <option value="6">6</option>
     9         <option value="7">7</option>
    10         <option value="8">8</option>
    11         <option value="9">9</option>
    12         <option value="10">10</option>
    13     </select>
    14 </form>

    a 标签:

    <a> 标签定义超链接,用于从一张页面链接到另一张页面,可以用来定义锚

    <a> 元素最重要的属性是 href 属性,它指示链接的目标。

    <a href="#id1">第一章</a>
    <a href="#id2">第二章</a>
    <a href="#id3">第三章</a>
    <a href="#id4">第四章</a>
    <a href="#id5">第五章</a>
    <a href="http://www.baidu.com">搜索</a>
    <div id="id1" style="height: 600px">第一章的内容</div>
    <div id="id2" style="height: 600px">第二章的内容</div>
    <div id="id3" style="height: 600px">第三章的内容</div>
    <div id="id4" style="height: 600px">第四章的内容</div>
    <div id="id5" style="height: 600px">第五章的内容</div>

     

    img 标签:

    title 属性:鼠标指上去会显示文本

    alt 属性:图片无法加载会显示文本

    <img src="example.jpg" title="示例图片" alt="假装有图片"/>

     

    列表:

    1. 有序列表:有序列表也是一列项目,列表项目使用数字进行标记。
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

     

     

    • 无序列表:无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>

     

    定义列表:自定义列表不仅仅是一列项目,而是项目及其注释的组合。

            每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
        <dt>第二章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
    </dl>

     

    表格:

    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    如果不需要表头就把<thead></thead>去掉

    <div>
        <table border="1">
            <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">2</td>
                <!--            表示单元格占两列-->
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="2">5</td>
                <!--            表示单元格占两行-->
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            </tbody>
        </table>
    </div>

     

    label 标签:

    用于点击文件,使得关联的标签获取光标

    通过 for 属性关联相关组件 ID

    <label for="username">用户名:</label>
    <input id="username" type="text" name="user" />

     

    fieldset 标签:

    定义围绕表单中元素的边框。

    使用<legend></legend>为 fieldset 标签添加标题,并添加在边框上

    <fieldset>
        <!--添加一个边框-->
        <legend>登陆</legend>
        <!--给边框嵌入文字-->
        <label for="username">user name:</label>
        <!--用于为id="username"获取光标-->
        <input id="username" type="text" name="user">
    </fieldset>

     

     

     

     

     

     

  • 相关阅读:
    JS站点
    1011 World Cup Betting (20分)
    1007 Maximum Subsequence Sum (25分)(动态规划DP)
    1006 Sign In and Sign Out (25分)
    1005 Spell It Right (20分)
    1004 Counting Leaves (30分)(DFS)
    1003 Emergency (25分)(Dijkstra算法)
    1002 A+B for Polynomials (25分)
    1001 A+B Format (20分)
    canvas
  • 原文地址:https://www.cnblogs.com/dbf-/p/10695938.html
Copyright © 2011-2022 走看看