html基础

HTML

1. 基本概念

1.1 概念

html(hyper text markup language)，超文本标记语言，用于创建网页的标准标记语言
标记语言是由标签构成的语言，例如html、xml
标记语言不是编程语言
html运行在浏览器上，由浏览器来解析

1.2 快速入门

html的后缀名可以是.html也可以是.htm, 没有区别
标签的分类：
围堵标签：<html> </html> 成对出现
自闭合标签：<br/>单独出现

标签嵌套：

<p><a></a></p>	//正确嵌套方式
<p><a><p><a>	//错误嵌套方式

标签的内部可以定义属性,属性由键值对组成，值需要用双引号引用，多个属性用空格隔开
```
<p attr1="val1" attr2="val2" ...... >
</p>
```

html标签不分大小写

<p> </P>	//但推荐标签统一使用小写

2. html基本结构

<!DOCTYPE html> <!--生命当前文档是html5文档-->
<html>  <!--根元素，只能有一个-->
    <!--
        头元素：
        1. 元数据meta title
        2. 引入外部的资源文件夹
    -->
    <head>
        <meta charset="utf-8">
        <title>First Web Page</title>
    </head>
    <!--
        主体，浏览器显示的内容全部在这里编写
    -->
    <body>
        hello html
        这是一个页面内容
    </body>
</html>

3. 常用标签

3.1 文本标签

标题标签 h1,h2,h3,h4,h5,h6
段落标签 p
换行标签 br
水平线标签 hr
范围标签，用于局部强调 span

<body>

    <p>This is a paragraphy</p>

    <hr color="red" size="10" >

    <p>This is another paragraphy</p>

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

    这段话太太太太太太太太太太太<br>太太太太太太太太太长了<br>,我换个行

    <br>
    <br>

    有些内容是废话，有些内容是要<span style="color: red; font-size: x-large;">划重点</span>的，不知道重点，你就要挂科
</body>

效果如下：

3.2 图片标签 img

基本属性 src title
src=图片的地址
title=悬停时图片显示的文字

热点区域 map area
map热点区域可用于图片区域跳转，当鼠标点击图片map设置的区域时会跳转到指定的 herf 标记的位置
用法：创建一个map标签并设置name属性，用于配置热点区域；然后再img标签中引用创建的map： usemap="#mapName"(不要忘记#)

<body>
        <!--
            图片标签---img
            title----鼠标悬停在图片上时，显示的文字
            alt-----功能与title类似，title兼容性更好
            width---图片宽px
            height----图片高px
            单独设置宽高容易使图片失真
        -->
    
        <img src="img/cat.png" title="小猫咪" alt="" width="260px" height="150px" >
        <br>

        <img src="img/bg1.png" alt="" title="This is a Test For Map" usemap="#mapTest">
        <map name="mapTest">
            <area shape="circle" coords="100,100,100" href="herf/circle.html" alt="" title="circle">
            <area shape="rect" coords="400,200, 600,100" href="herf/rectangle.html" alt="" title="rectAngle">
            <area shape="poly" coords="200,300, 240,400, 360,400, 400,300, 300,240" 
                    href="herf/polygon.html" alt="" title="polygon">
        </map>
</body>

3.3 列表标签

有序列表 ul - li (ul unordered list)

无序列表ol - li (ol ordered list)

<body>
	    <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>

        <ol>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ol>
</body>

显示效果如图：

3.4 定义描述标签

定义描述标签，一般用于图文混合的场景中

<!--定义描述标签
dl - 
dt------dt一般只有一个
dd------dd可以有多个
-->

<dl>
    <dt>最受欢迎的产品</dt>
    <dd>商品价格：￥259</dd>
    <dd>商品名称：熊本熊</dd>
</dl>

<br><br>
<dl>
    <dt><img src="img/x1.jpg" alt=""></dt>
    <dd>商品价格：￥259</dd>
    <dd>商品名称：熊本熊</dd>
</dl>

显示效果如图：

3.5 布局标签层 div

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Z这里是Div标签</title>
    </head>

    <body>
        <div id="container" style="width:500px;">

            <div id="header" style="background-color:#0616f8;">
                <h1 style="margin-bottom:0;text-align:center;">Div布局实例</h1>
            </div>

            <div id="menu" style="background-color:#c98d8d;height:200px;width:100px;float:left;">    
                菜单<br/>
                num1<br/>
                num2<br/>
                num3
            </div>

            <div id="content" style="background-color:#f3f38c;height:200px;width:300px;float:left;">
                中间内容
            </div>

            <div id="right" style="background-					          color:#000000;color:#FFFFFF;height:200px;width:100px;float:right;">
                信息内容
            </div>

            <div id="bottom" style="background-color:#F0F8FF;clear:both;text-align:center;">
                作者：zfm
            </div>

        </div>
    </body>
</html>

显示效果：

3.6 小结：标签分类

html标签可以分为块状元素和行级元素两类。

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1. 块级元素会独占一行，其宽度自动填满其父元素宽度；而行内元素会排列到同一行，其宽度随元素的内容变化而变化。
2. 块级元素可以设置宽高；行内元素设置宽高无效。
3. 块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。
标签归类：
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div
…

属于行级元素的：

范围标签：span
图像标签：img
…

4. 超链接

页面间跳转
锚链接

<!--超链接
    _self在当前页面跳转
    _blank新建页面并跳转
-->
<a href="div.html" target="_self">我是超链接，点我试试，当前页面跳转</a>  <br>
<a href="div.html" target="_blank">我也是超链接，点我试试，新建页面跳转</a>

<br>

<!--锚链接-->
<a href="#区域5的锚链接">区域5锚链接，点下试试</a>
<a href="div.html#锚链接">其他页面的锚链接,点下试试</a>

<div style="height: 300px;">
    区域1
</div>

<div style="height: 300px;">
    区域2
</div>

<div style="height: 300px;">
    区域3
</div>

<div style="height: 300px;">
    区域4
</div>

<div style="height: 300px;">
    <a name="区域5的锚链接"></a>    <!--定义一个锚链接-->
    区域5
</div>


<div style="height: 300px;">
    区域6
</div>

<div style="height: 300px;">
    区域7
</div>

<div style="height: 300px;">
    区域8
</div>

5. 表格标签table

5.1 规则表格

table

<!--table标签
    tr         表格的行
    td/th      表格的列，一般第一行用th，其它行用td
	border 	   表格的边框
    width
    height  如果不设置宽高，那么表格的宽高将由内容来决定
    cellpadding  内容距离边框线的距离（上下左右）
    cellspacing  表格各个格子之间的距离
    align   ---在table tr td中均可以设置，文字水平对齐方式，right，left，center
    valign  ------在table tr td中均可以设置，文字垂直对齐方式，top，bottom，center
-->
<table border="2" width="100%" height="150px" cellpadding="0" cellspacing="0">
    <tr align="center"> <!--第一行-->
        <td>序号</td> <td valign="center">商品名称</td> <td>价格</td>
    </tr>

    <tr align="right"> <!--第二行-->
        <td align="left">1</td>
        <td valign="top">辣条</td>
        <td>￥18</td>
    </tr>

    <tr> <!--align 文本的对齐方式，默认靠左 left--> <!--第三行-->
        <td>2</td>
        <td valign="bottom">可乐</td>
        <td>￥4.5</td>
    </tr>

</table>

显示效果：

5.2 不规则表格

colspan: 跨列
rowspan：跨行

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <table border="1"  width="90%" >
            <tr height="120px"> <!--跨三列-->
                <td colspan="3" align="center">这是跨列的</td>
            </tr>
        
            <tr height="60px">	<!--跨两行-->
                <td rowspan="2">这是跨行的</td> <td valign="top">这是正常的</td> <td>这是正常的</td>
            </tr>
        
            <tr height="20px">
                <td align="center">这是正常的</td> <td>这是正常的</td>
            </tr>
        
        
        </table>

    </body>
</html>

显示效果：

5.3 标题标签和逻辑分区标签

caption：表格的标题
thead tbody tfoot : 都是逻辑分区标签，在编写样式之前对整体结构没有影响

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <table border="1"  width="90%" >
            <!--caption 标题标签-->
            <caption style="font-size: large;"><b>班级成绩表</b></caption>

            <thead style="background-color: tomato;">
                <tr>
                    <th rowspan="2">姓名</th> <th colspan="3">科目</th>
                </tr>
                <tr>
                    <td>数学</td> <td>语文</td> <td>物理</td>
                </tr>
            </thead>
            
            <tbody style="background-color: wheat;">
                <tr>
                    <td>张三</td>	<td>95</td> <td>88</td> <td>91</td>
                </tr>
            
                <tr>
                    <td>李四</td> <td>91</td> <td>75</td> <td>86</td>
                </tr>

                <tr>
                    <td>王五</td> <td>75</td> <td>92</td> <td>80</td>
                </tr>

                <tr>
                    <td>赵老六</td> <td>76</td> <td>65</td> <td>59</td>
                </tr>
            </tbody>

            <tfoot style="background-color:yellow; color: red;">
                <tr>
                    <td>平均分</td> <td>算不来</td> <td>自己算</td> <td>不知道</td>
                </tr>
            </tfoot>
        
        
        </table>

    </body>
</html>

显示效果如图：

6. 表单 form

表单用于采集用户的输入，以便和服务器进行交互

frame : 表单标签，有以下常用属性
- action：指定提交数据的url
- method：指定提交的方式，一共7中，常用的是get和post
  get：
  1. 请求参数会在地址栏中显示。封装到请求行中。
  2. 请求参数大小有限制
  3. 不安全
  post
  1. 请求参数不会在地址栏中显示。封装到请求体中。
  2. 请求参数大小无限制
  3. 较为安全
- enctype：表单中有文件上传时必备该属性，且值为multipart/form-data
表单项元素：
- 元素类型：文本框，密码框，单选框，多选框，下拉列表，文件域，文本域，日期，按钮，隐藏域等
- 表单项常用属性：
  - id: 表单项元素的唯一标识，不可重复
  - name：表单项元素的名称，服务器通过该名称获取数据
  - value：表单项元素的值，服务器通过name获取到的值就是value
  - type：表单项元素的类型
  - class：表示样式名称
  - readonly:只读
  - disable:不可用
  - …

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <h1>一个注册页面</h1>
        <form action="dst.html" method="GET" enctype="multipart/form-data">
            <!--    text：文本框
                label：点击用户名三个字即可输入，不必点击输入框(for属性绑定了text文本框中的id值)         
                placeholder:文本框中显示的提示文字，输入时自动消失
            -->
            <label for="userName">用户名:</label>
                <input type="text" name="userName" id="userName" placeholder="请输入用户名">
                <br>

            <!--    password：密码框            
                required: 必填项，否则提交时会出错
            -->
            密码:
                <input type="password" name="password" id="password" required>
                <br>

            <!--    radio: 单选框
                checked：默认选中，可以直接写一个checked省略值，也可以写成checked="checked"
            -->
            性别:
                <input type="radio" name="sex" id="sex" value="男" checked="checked">男
                <input type="radio" name="sex" id="sex" value="女">女
                <input type="radio" name="sex" id="sex" value="人妖">人妖
                <input type="radio" name="sex" id="sex" value="太监">太监
                <br>
            婚姻状态:
                <input type="radio" name="marrtStatus" value="1" id="">已婚
                <input type="radio" name="marrtStatus" value="0" id=""  checked="checked">未婚
                <br>

            <!--    checkbox：复选框
                checked：默认选中，可以直接写一个checked省略值，也可以写成checked="checked"
            -->
            爱好: 
                <input type="checkbox" name="hobby" value="swim" id="">游泳
                <input type="checkbox" name="hobby" value="tableTennis" id="">乒乓球
                <input type="checkbox" name="hobby" value="reading" id="">看书
                <input type="checkbox" name="hobby" value="moYu" id="">摸鱼
                <br>

            <!--    file: 文件域
                表单中如果有文件上传，form中最好有enctype="multipart/form-data" <form enctype="multipart/form-data"></form>
                multiple: 表示可以同时上传多文件
            -->
                
            头像:
                <input type="file" name="headImg" multiple="multiple" id="">
                <br>

            <!--   日期 html5新特性
                date：表示年月日
                datetime-local:表示年月日+时间
            -->
            生日:
                <input type="date" name="birthday" id="">
                <input type="datetime-local" name="birthday" id="">

            <!--    select: 下拉列表框，name写在select中
                option：选项值
                value: name对应的值
                selected: 表示默认选中
            -->
            家庭住址:
                <select name="省" id="">
                    <option value="江西" selected="selected">江西</option>
                    <option value="江苏">江苏</option>
                    <option value="浙江">浙江</option>
                    <option value="湖北">湖北</option>
                </select>

                <select name="市" id="">
                    <option value="南昌">南昌</option>
                    <option value="杭州">杭州</option>
                </select>
                <br>

            <!--    textarea文本域
                rows：默认多少行
                cols：列数，每一行的字符数
                readonly: 只读
                disable: 不可用，样式会呈现灰色
            -->
            协议:
                <textarea name="" id="" cols="30" rows="10" readonly="readonly" disabled="disabled">
                    协议内容
                    第一行
                    第二行
                    第三行
                </textarea>
                <br>
            
            <!--
                submit: 提交按钮, 将输入的值提交到form中action设置的指定路径
                reset:重置按钮，清空表单的任何输入，回到原始状态
                button:普通按钮，无任何功能
                image:与submit按钮功能类似，value没有值，且多出了一个src="imgPath"
                button可以实现类似的功能，单button没有image类型
            -->
            按钮：
                <input type="submit" name="" value="注册提交按钮" id="">
                <input type="reset" name="" value="重置按钮" id="">
                <input type="button" name="" value="普通按钮" id="">
                <br>
                <input type="image" src="img/cat.png" name="" value="" id="">
                <br>

            Button:
                <button type="submit">提交</Button>
                <button type="reset">重置按钮</Button>
                <button type="button">普通按钮</Button>
                <br>

            <!--    hidden:隐藏域
                页面上看不到任何效果，但程序需要的值
            -->
            隐藏域：
                <input type="hidden" name="test" value="testValue" id="">
        </form>

    </body>

</html>

综合显示效果：

7. iframe框架

使用iframe可以在同一个页面上显示多个页面，可以把iframe想象成一个空白框，在里面可以引入别的页面，可以是本地的也可以是外部的

<!DOCTYPE html>
<html>
    <body>
        <!--    框架iframe
            src：要显示页面的源地址
            frameborder：框的边界
            width height 框的宽高
        -->
        <iframe name="本地iframe" src="testIframe.html" frameborder="1" width="80%" height="200px"></iframe>
        <iframe name="百度页面" src="https://baidu.com" frameborder="0" width="100%" height="400px"></iframe>
        <iframe name="淘宝页面" src="https://taobao.com" frameborder="1" width="50%" height="200px"></iframe>
        
        <p>
            <!--跳转到"本地iframe"框并将这个页面显示为百度搜索页面-->
            <a href="https://baidu.com" target="本地iframe">跳到百度页面</a>
            <!--跳转到"本地iframe"框并将这个页面显示为淘宝页面-->
            <a href="https://taobao.com" target="本地iframe">跳到淘宝页面</a>
            <!--跳转到"本地iframe"框并将这个页面显示为本地iframe页面-->
            <a href="testIframe.html" target="本地iframe">跳到本地页面</a>
        </p>
    </body>
</html>

8. 常用的布局组合标签

div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局

9. 转义符号

&开头;结尾

&nbsp;	空格
&lt;	<
&gt;	>
&copy;	版权符号©

回归预测 | MATLAB实现TSO-SVM金枪鱼群算法优化支持向量机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现TSO-SVM金枪鱼群算法优化支持向量机多输入单输出回归预测（多指标，多图）目录

对象缓冲池 java_对象池(对象缓冲池)-高手进阶(zz)

import java.util.*; public class LRUCacheWithListener { class CacheNode { CacheNode prev; CacheNode ne

delphi NetHttpClient

https://www.cnblogs.com/hnxxcxg/category/

TypeScript入门

TypeScript入门手册

编译SSD caffe出错

出现错误error: ‘type name’ declared as function returning an array 解决方案： 1、更新gcc版本到5.3（具体步骤百度） 2、修改修改json_parser_read.hpp： su

oracle数据导出并压缩,WINDOW下ORACLE数据自动导出并压缩的脚本

WINDOW下ORACLE数据自动导出并压缩的脚本 @ECHO 功能：获取系统日期时间，导出数据库 @ECHO 说明：随便使用和更改 @ECHO 作者：由网友守护者提供的脚本改变的 @ECHO 时间：2007-10-30

hadoop伪分布 hbase安装

下载地址：http://archive.apache.org/dist/hbase/1.3.1/

[Oracle] Oracle导入导出、删除创建用户、表空间

一、用户查询当前用户 SQL> show user

Angular 中级

目录（6 - 12 章）

Flutter中的应用程序架构：构建可维护、可扩展的应用程序

作者：禅与计算机程序设计艺术

当先锋百科网

html基础

文章目录

1. 基本概念

1.1 概念

1.2 快速入门

2. html基本结构

3. 常用标签

3.1 文本标签

3.2 图片标签 img

3.3 列表标签

3.4 定义描述标签

3.5 布局标签层 div

3.6 小结：标签分类

4. 超链接

5. 表格标签table

5.1 规则表格

5.2 不规则表格

5.3 标题标签和逻辑分区标签

6. 表单 form

7. iframe框架

8. 常用的布局组合标签

9. 转义符号