a标签和锚点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--超链接地址前加http&ndash;&gt; http://www.baidu.com-->

<a href="http://www.baidu.com" target="_blank">百度</a><br/>

<a href="#i1">第一章</a>&nbsp;

<a href="#i2">第二章</a>&nbsp;

<a href="#i3">第三章</a>&nbsp;

<a href="#i4">第四章</a>&nbsp;

<div id="i1" style="height: 500px;"><a>第一章内容</a></div>

<div id="i2" style="height: 500px;"><a>第二章内容</a></div>

<div id="i3" style="height: 500px;"><a>第三章内容</a></div>

<div id="i4" style="height: 500px;"><a>第四章内容</a></div>

</body>

</html>

html的form表单



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单测试搜索</title>
</head>
<body>

<!--<form action="https://www.sogou.com/web" method="get">-->
<!--<div>-->
<!--<input type="text" name="query"    />-->
<!--<input  type="submit" value="搜索"/>-->
<!--</div>-->
<!--</form>-->

<div>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</div>

<form action="" method="get" enctype="multipart/form-data">
    <div>
        <input type="password" value="密码框">
        <input type="text" value="默认文本框">
        <input type="button" value="登录">
        <p>请输入你的选择</p>
        <p><input type="radio" name="genetor" value="1"/>男</p>
        <p><input type="radio" name="genetor" value="2"/>女</p>
        <p><input type="checkbox" name="fav" ,value="1">长江</p>
        <p><input type="checkbox" name="fav" ,value="2" checked="checked">黄河</p>
        <p><input type="file" name="fname">上传文件</p>
        <p><input type="submit" value="提交"/></p>
        <p><textarea name="meno">多行文本此处为默认值</textarea></p>
        <p><select name="city" multiple="multiple">

            <optgroup label="江苏">

                <option value="1">常州</option>
                <option value="2">镇江</option>
                <!--selected表示默认勾选-->
                <option value="3" selected="selected">无锡</option>

            </optgroup>

        </select></p>
        <p><input type="reset" value="重置"></p>

    </div>
</form>
<form>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>123</li>
        <li>233</li>
        <li>333</li>

    </ol>
    <dl>
        <dt>111</dt>
        <dd>aaa</dd>
        <dd>bbb</dd>
        <dd>ccc</dd>
    </dl>
    <table border="1">
        <tr>
            <td>主机IP</td>
            <td>端口</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>172.20.59.127</td>
            <td>8888</td>
            <td><a href="#">查看详细</a>&nbsp;<a href="#">删除</a></td>
        </tr>
        <tr>
            <td>172.20.90.114</td>
            <td>9999</td>
            <td><a href="#">查看详细</a>&nbsp;<a href="#">删除</a></td>
        </tr>

    </table>

    <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>2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
        </tr>

        </tbody>

    </table>
</form>

</body>
</html>


 




input标签与label标签创建关联  主要是for方法




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>input标签与label创建关联</title>

</head>

<body>

<label for="username">用户名：</label>

<input id="username" type="text" name="user">

<fieldset>

    <legend>登录</legend>

    <label for="uname">用户名</label>&nbsp;<input type="text"  id="uname" name="user"/><br />

    <label for="passwd">密码</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="passwd" name="passowrd">

</fieldset>

</body>

</html>


												


											
HTML的day1 HTML的标签的更多相关文章
	

    
								
  1. javaweb之框架标签(day1 框架标签的使用)
		
    框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...
    
		
    2. 
						
  2. 从0开始学前端（笔记备份）----HTML部分 Day1 HTML标签
		
    
		
    3. 
						
  3. Day1:html和css
		
    Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...
    
		
    4. 
						
  4. Day1：用户交互与格式化输出
		
    一.用户交互 1.input()方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan username = inpu ...
    
		
    5. 
						
  5. 前端入门——day1（简介及推荐书籍和网站）
		
    写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...
    
		
    6. 
						
  6. 前端星计划笔记-day1
		
    前端 功能,美观,安全,无障碍,性能,兼容,体验 前端编程思想 WA doctype: 文档版本 浏览器决定渲染模式 语义化: 所有的标签都有自己的含义,属性 可读性 前端规范 whatwg css显 ...
    
		
    7. 
						
  7. html笔记  标签属性、图像和链接、超链接
		
    HTML 标签属性: <b></b>:加粗 <i></i>:斜体 <u></u>:下划线 <s></s> ...
    
		
    8. 
						
  8. a标签点击跳转失效--IE6、7的奇葩bug
		
    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
    
		
    9. 
						
  9. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
		
    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 数据结构与算法之PHP排序算法（希尔排序）
			
    一.基本思想 希尔排序算法是希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本. 该方法的基本思想是:先将整个待排元素序列分割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接 ...
    
			
    2. 
						
  2. [lightoj P1151] Snakes and Ladders
			
    1151 - Snakes and Ladders Time Limit: 2 second(s)    Memory Limit: 32 MB 'Snakes and Ladders' or 'Sh ...
    
			
    3. 
						
  3. ES6学习笔记（二）—— 通过ES6 Module看import和require区别
			
    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
    
			
    4. 
						
  4. Php基本类型——布尔类型
			
    1)简介 布尔类型,这是最简单的类型,bollean表达了真值,可以为true或false,它是php4引进的. 2)语法 要指定一个布尔值,使用关键字true或false,两个都不区分大小写. &l ...
    
			
    5. 
						
  5. js利用sort()方法实现数组排序
			
    1.number类型排序 let aa = [1,11,2,4,3] aa.sort() console.log(aa) //[1,11,2,3,4] aa.sort((a,b)=>a-b) c ...
    
			
    6. 
						
  6. coursera-斯坦福-机器学习-吴恩达-笔记week4
			
    1 神经网络的提出 线性回归和逻辑回归能很好的解决特征变量较少的问题,但对于变量数量增加的复杂非线性问题,单纯增加二次项和三次项等特征项的方法计算代价太高. 2 神经网络算法 2.1 神经元 模拟神经 ...
    
			
    7. 
						
  7. 显卡、GPU和CUDA简介
			
    http://blog.csdn.net/wu_nan_nan/article/details/45603299 声明: 本文部分内容来自网络.由于知识有限,有错误的地方还请指正.本帖为自己学习过程的 ...
    
			
    8. 
						
  8. Java 实现缓存，一个线程存，一个线程取
			
    缓存类: package com.zit.test; import java.util.concurrent.BlockingDeque; import java.util.concurrent.Li ...
    
			
    9. 
						
  9. Quartz定时器＋Spring + @Autowired注入 空指针异常
			
    在Quartz的定时方法里引用@Autowired注入Bean,会报空指针错误 解决办法: 第一种方法:(推荐,简单,亲测可行) 使用@Resource(name="指定要注入的Bean&q ...
    
			
    10. 
						
  10. librdkafka安装和php扩展php-rdkafka安装
			
    1.安装librdkafka mac下   brew install librdkafka linux下 git clone https://github.com/edenhill/librdkafk ...
    
			
    11.