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. Cloudera Manager和CDH5.8离线安装

    https://blog.csdn.net/zzq900503/article/details/52982828 简介 我们在上篇文章中已经了解了CDH,为了后续的学习,我们本章就来安装CDH5.8. ...

  2. Nvidia和Google的AI芯片战火蔓延至边缘端

    AI 的热潮还在持续,AI 的战火自然也在升级.英伟达作为这一波 AI 浪潮中最受关注的公司之一,在很大程度上影响着 AI 的战局.上周在美国举行的 GTC 2019 上,黄仁勋大篇幅介绍了英伟达在 ...

  3. Golang 入门系列（二）学习Go语言需要注意的坑

    上一章节我们已经了解了 Go 环境的配置,不了解的,请查看前面的文章 https://www.cnblogs.com/zhangweizhong/p/9459945.html,本章节我们将学习 Go ...

  4. git完全cli指南之详细思维导图整理分享

    一直以来都觉得 在开发过程中 能用命令行的还是用命令行 能用快捷键的就要快捷键 前期可能要点学习成本 但是熟练后带来的好处还是非常可观的 所以一直坚持使用命令行的方式来使用git 基本上每个操作都能心 ...

  5. springboot项目利用Swagger2生成在线接口文档

    Swagger简介. Swagger2是一款restful接口文档在线生成和在线调试工具.很多项目团队利用Swagger自动生成接口文档,保证接口文档和代码同步更新.在线调试.简单地说,你可以利用这个 ...

  6. Leetcode 21. Merge Two Sorted Lists（easy）

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  7. heapsort(Java)(最小堆)

    public static void main(String[] args) { Scanner input = new Scanner(System.in); int n = input.nextI ...

  8. mysql千万级数据优化查询

    我们在做一个项目,一个网站或一个app时,用户量巨增,当使用的mysql数据库中的表数据达到千万级时,可以从以下方面考滤优化: 1.在设计数据库表的时候就要考虑到优化 2.查询sql语句上的优化 3. ...

  9. Linux operating system basic knowleadge

    1.Linux目录系统结构  It makes sense to explore the Linux filesystem from a terminal window. In fact, that ...

  10. python yield 理解与用法

    1.一句话快速理解 yield 等于 return  这么简单理解 2.详细说明: yield和return的关系和区别了,带yield的函数是一个生成器,而不是一个函数了 这个生成器有一个函数就是n ...