1 HTML部分常用知识点

<!-- 版本声明 -->

<!DOCTYPE html>

<!-- 唯一根元素 -->

<html>

<!-- 对网页做基本的配置 -->

<head>

<!-- 声明网页编码，HTML5不严格准守XML 所以单标签可以不以/结束 -->

<meta charset="UTF-8">

<title>实验网页</title>

</head>

<!-- 写网页的具体内容 -->

<body>

    <!-- 1 标题 （块）-->

    <h1>第一标题</h1>

    <h2>第二标题</h2>

    <h3>第三标题</h3>

    <a href = "#conan"><h6>第六标题 </h6></a>

    <!-- 2段落 （块）-->

    <p>这是段落</p>

    <!-- 3.1 有序列表 -->

    <ol>

        <li>安徽省</li>

        <li>湖北省</li>

        <li>河北省</li>

    </ol>

    <!-- 3.2 无序列表 -->

    <ul>

        <li>北京</li>

        <li>上海</li>

        <li>南京</li>

    </ul>

    <!-- 3.3 嵌套列表 -->

    <ol>

        <li>

        河北省

            <ul>

                <li>石家庄</li>

                <li>唐山</li>

            </ul>

        </li>

        <li>

            山东省

            <ul>

                <li>济南</li>

                <li>青岛</li>

            </ul>

        </li>

        <li>安徽省</li>

    </ol>

    <!-- 4  行内元素 -->

    <P>

        <i>倾斜，安徽省马鞍山市安徽工业大学</i>

        <strong>加粗，安徽省马鞍山市安徽工业大学</strong>

        <del>删除线，安徽省马鞍山市安徽工业大学</del>

        <b>加粗，安徽省马鞍山市安徽工业大学</b>

        <span style = "color:red;">设置颜色，安徽省马鞍山市安徽工业大学</span>

    </P>

    <!-- 5 空格折叠 -->

    <p>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;静夜思<br>

        &nbsp;&nbsp;床前明月光，<br>

        &nbsp;&nbsp;疑是地上霜。<br>

        &nbsp;&nbsp;举头望明月，<br>

        &nbsp;&nbsp;低头思故乡。<br>

        &lt;<br>

    </p>

    <!-- 6  图片（行内元素，左右排列） -->

    <p>

        <!-- 绝对路径 ，长且改路径麻烦 ，不常用-->

        <img  src="picture/code.jpg "/>

        <!-- 相对路径,只要网页和图片相对位置不变则一般不会出问题，比较方便，常用 .补充：上级文件夹用..-->

        <img src="picture/conan.jpg"/>

    </p>

    <!-- 7.1  超链接（行内） -->

    <p>

        <a href = "https://www.cnblogs.com/kwinwei/">KwinWei'blog</a> <br>

        <!-- 新窗口打开网页  -->

        <a href = "https://www.cnblogs.com/kwinwei/" target = "_blank;">KwinWei'blog</a><br>

    </p>

    <!-- 7.2  超链接特殊用法 ,超链接到本网页某个位置,这个位置叫锚点，锚点要提前声明 -->

    <p>

        <a name="conan"> 柯南-基德 </a><br>

        <!-- 顶部默认就是锚点，没有名字 -->

        <a href = "#">返回顶部</a>

    </p>

    <!-- 8 表格 （块），块元素不需要用段落 -->

        <!-- 8.1 表格基本格式 -->

        <!-- table声明 -->

        <table border = "1" cellspacing = "0" width = "30%">

            <!-- 声明行 -->

            <tr>

                <!-- 声明行内元素 -->

                <td>人名</td>

                <td>年龄</td>

            </tr>

            <tr>

                <td>Kwin</td>

                <td>23</td>

            </tr>

        </table>

    <!-- 8.2 跨行 ,又叫单元格合并 -->

    <table border = "1" cellspacing = "0" width = "30%">

            <!-- 声明行 -->

            <tr>

                <!-- 声明行内元素 -->

                <td  rowspan = "2">人名</td>

                <td>年龄</td>

            </tr>

            <tr>

                <!--  <td>Kwin</td>   -->

                <td>23</td>

            </tr>

        </table>

    <!-- 8.3 跨列 -->

    <table border = "1" cellspacing = "0" width = "30%">

            <!-- 声明行 -->

            <tr>

                <td>人名</td>

                <td>年龄</td>

            </tr>

            <tr>

                <td colspan ="2">Kwin</td>

                <!-- <td>23</td>  -->

            </tr>

        </table>

    <!-- 8.4 行分组 -->

    <table border = "1" cellspacing = "0">

        <thead>

            <tr>

                <td>姓名</td>

                <td>年龄</td>

                <td>薪资</td>

            </tr>

        </thead>

        <tbody style="color:blue;">

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3333</td>

            </tr>

            <tr>

                <td>2</td>

                <td>444</td>

                <td>5555</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan ="2">合计</td>

                <td>8888</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

2 HTML 表单用于收集不同类型的用户输入。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

    <!-- 表单 -->

    <form action="www.baidu,com">

    <!-- 1 表单元素  账号

    value 指定默认值

    maxlength 最大长度

    readonly 只读

    -->

    <p>

        账号：<input type = "text" value="Kwin"  maxlength=15/>

    </p>

    <!-- 2 密码,修饰属性同上  -->

    <P>

        密码：<input type="password"/>

    </P>

    <!-- 3 单选

    name 组名，定义为同一组，才可以区分互斥

    checked 默认选中

    -->

    <P>

        性别：<input type="radio" name="sex" checked/>男

            <input type="radio" name="sex"/>女

    </P>

    <!-- 4 多选 -->

    <p>兴趣：

        <input type="checkbox" />音乐

        <input type="checkbox" />读书

        <input type="checkbox" />跑步

        <input type="checkbox" />篮球

        <input type="checkbox" />足球

    </p>

    <!-- 5 文件筐  -->

    <p>头像：

        <input type="file"/>

    </p>    

    <!-- 6 隐藏框 -->

    <p>

        <input type="hidden">

    </p>

    <!-- 7 提交按钮 8 重置  -->

    <p>

        <input type="submit" value="注册"/>

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

    </p>

    <!-- 9 普通按钮 ，功能由js代码自己写  -->

    <p><input type="button" value="普通按钮"/>

    </p>

    <!-- 10 标签

    label：用来管理表单中的文本，将文本与控件绑定，增大可选择面积，方面老年等看不清小按钮人选择使用

     id：用来区分标签名与for配合使用

     -->

    <p>

        <input type="checkbox" id="c1"/>

        <label for="c1">我已阅读并自愿接受此协议！</label>

    </p>

    <!-- 11 文本域  -->

    <p>简介：

        <textarea cols="10" rows="3">请在此处输入简介！

        </textarea>

    </p>

    <!-- 12 下拉选 -->

    <p>

    城市：

    <select>

        <option selected>北京</option>

        <option>上海</option>

        <option>合肥</option>

        <option>南京</option>

    </select>

    </p>

</form>

</body>

</html>

HTML常用知识点代码演示的更多相关文章

  1. 【.NET基础】Linq常用语法代码演示

    前言:前言不重要,linq入门常用的语法,linq语法可以用来写操作集合.数据库表集合等等几乎所有集合类型的操作.下面就写几个案例(以List集合来做的),看代码和运行结果即可. 本文演示环境:VS2 ...

  2. 单元测试_JUnit常用单元测试注解介绍及代码演示

    JUnit常用单元测试注解介绍及代码演示   by:授客 QQ:1033553122 1. 测试环境 1 2. 基础概念 1 3. 常用Annotation 1 4. 运行环境配置 3 maven配置 ...

  3. DB2_SQL_常用知识点&实践

    DB2_SQL_常用知识点&实践 一.删除表中的数据(delete或truncate) 1 truncate table T_USER immediate; 说明:Truncate是一个能够快 ...

  4. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  5. Less常用知识点

    上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了.今天了解一些less常用知识点. 1.变量:声明两个变量,一个是 ...

  6. BIOS备忘录之EC常用知识点

    BIOS工程师眼中常用的EC知识点汇总: EC的硬件架构 EC硬件结构上主要分为两部分:Host Domain和EC Domain Host Domain就是通过LPC与CPU通信的部分(LPC部分需 ...

  7. sqlserver常用知识点备忘录（持续更新）

    背景 一个项目的开发,离不开数据库的相关操作,表/视图设计,存储过程,触发器等等数据库对象的操作是非常频繁的.有时候,我们会查找系统中类似的代码,然后复制/粘贴进行再进行相应的修改.本文的目的在于归纳 ...

  8. javaScript常用知识点有哪些

    javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...

  9. 一文学会 TypeScript 的 82% 常用知识点（下）

    一文学会 TypeScript 的 82% 常用知识点(下) 前端专栏 2019-11-23 18:39:08     都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得 ...

随机推荐

  1. socket粘包问题解决

    粘包client.send(data1)client.send(data2)这两次send紧挨在一起,处理的时候会放在一起发过去在Linux里每次都粘包,Windows里面某次会出现粘包在两次send ...

  2. 【Linux基础】Unix与Linux操作系统介绍

    一.Unix和Linux操作系统概述 1.Unix是什么 UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序. 2.Unix特点 (1)多用户:在同一时刻可以有多个用 ...

  3. SQL ALTER TABLE 语句

    ALTER TABLE 语句 ALTER TABLE 语句用于在已有的表中添加.修改或删除列. SQL ALTER TABLE 语法 如需在表中添加列,请使用下列语法: ALTER TABLE tab ...

  4. python基础语法、数据结构、字符编码、文件处理 练习题

    考试范围 '''1.python入门:编程语言相关概念2.python基础语法:变量.运算符.流程控制3.数据结构:数字.字符串.列表.元组.字典.集合4.字符编码5.文件处理''' 考试内容 1.简 ...

  5. 如何将Bitcoin比特币区块链数据导入关系数据库

    在接触了比特币和区块链后,我一直有一个想法,就是把所有比特币的区块链数据放入到关系数据库(比如SQL Server)中,然后当成一个数据仓库,做做比特币交易数据的各种分析.想法已经很久了,但是一直没有 ...

  6. 炸弹人游戏开发系列（7）：加入敌人，使用A*算法寻路

    前言 上文中我们实现了炸弹人与墙的碰撞检测,以及设置移动步长来解决发现的问题.本文会加入1个AI敌人,敌人使用A*算法追踪炸弹人. 本文目的 加入敌人,追踪炸弹人 本文主要内容 开发策略 加入敌人 实 ...

  7. 基于 HTML5 结合互联网+的电力接线图

    前言 “互联网+”思维让数据的搜集和获取更加便捷,并且随着大数据的深度开发和应用,数据分析预测对于提升用户体验有非常重要的价值,同时也为不同行业.不同领域的合作提供了更广阔的空间.传统的发电企业是一个 ...

  8. java基础-开发工具IDEA

    常用快捷键 查找 查找:Ctrl + F Find In Path: Ctrl + F + Shift (比普通查找多了一个shift) Search EveryWhere : 双击Shift 视图 ...

  9. Spring-framework

    1.spring注解驱动开发 官方文档 @Configuration 告诉spring这是一个配置类,配置类=配置文件 @Bean 给容器中注入一个bean,类型为返回值类型,id默认用方法名作为id ...

  10. Python之路1-变量、数据类型、循环语法

    1.python语言介绍 编程语言主要从以下几个角度进行分类,编译型和解释型,静态语言和动态语言,强类型定义语言和弱类型定义语言. 编译和解释区别 编译器是把源程序的每一条语句都编译成机器语言,并保存 ...