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. China Tightens Recycling Import Rules

    China Tightens Recycling Import Rules We have all seen the pictures of cities in China with air poll ...

  2. Spring类型转换（Converter）

    Spring的类型转换 以前在面试中就有被问到关于spring数据绑定方面的问题,当时对它一直只是朦朦胧胧的概念,最近稍微闲下来有时间看了一下其中数据转换相关的内容,把相应的内容做个记录. 下面先说明 ...

  3. HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡

    一.超链接美化 二.模态框 三.tab栏选项卡 -------------------------------------------- 一.超链接美化 <!DOCTYPE html> & ...

  4. linux环境快速编译安装python3.6

    一.下载python3源码包 cd /tmp/wget https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz 二.下载python3编译的依 ...

  5. Django 路由系统（URLconf）

    URLconf是什么? URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的view函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调 ...

  6. DSP到底是个什么鬼？看完你就懂了

    DSP 即数字信号处理技术, DSP 芯片即指能够实现数字信号处理技术的芯片. DSP芯片是一种快速强大的微处理器,独特之处在于它能即时处理资料. DSP 芯片的内部采用程序和数据分开的哈佛结构,具有 ...

  7. jeecg字典表—普通表

    创建普通表 同步数据库(创建对应的表) 验证功能效果 添加用户表,并添加对应的级别属性 同步用户表 字典功能测试 然后生成最新代码,添加到菜单即可

  8. 2018 C++ Teaching Assistant Summary

    期末考结束后就留校开始了科研,最近刚回家休息了两三天,整理了思绪,准备补上这一篇拖延了一个多月的助教小结. 早在一年多前我上栋哥这门课时,我就十分乐意给予同学帮助,无论是技术上的,还是说思想上的(也可 ...

  9. js04-DOM对象一

    一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...

  10. spring cloud实战与思考（二） 微服务之间通过fiegn上传一组文件（上）

    需求场景: 微服务之间调用接口一次性上传多个文件. 上传文件的同时附带其他参数. 多个文件能有效的区分开,以便进行不同处理. Spring cloud的微服务之间接口调用使用Feign.原装的Feig ...