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标签
         图标，  (空格)，>(>)，<(<)
         <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="假装有图片"/>

列表：

有序列表：有序列表也是一列项目，列表项目使用数字进行标记。

<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>

posted on 2019-04-12 14:37 doubtful 阅读(223) 评论(0) 编辑收藏举报

刷新页面返回顶部

doubtful

HTML基础

HTML 标签

导航

公告