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. hello随笔

    初次来到博客园,都试一下 我明白了,随笔就是博客咯.日记自对自己可见.再试试分类吧

  2. Jetson TX2（2）ubutu1604--安装opencv3.4.0

    1安装OpenCV3.4.0+contrib 1 在终端中敲入以下两句sudo rm /var/cache/apt/archives/locksudo rm /var/lib/dpkg/lock su ...

  3. python实现数据结构单链表

    #python实现数据结构单链表 # -*- coding: utf-8 -*- class Node(object): """节点""" ...

  4. java如何获取一个对象的大小【转】

    When---什么时候需要知道对象的内存大小 在内存足够用的情况下我们是不需要考虑java中一个对象所占内存大小的.但当一个系统的内存有限,或者某块程序代码允许使用的内存大小有限制,又或者设计一个缓存 ...

  5. AI xavier算法

    xavier算法 参考链接: http://proceedings.mlr.press/v9/glorot10a/glorot10a.pdf

  6. 私有云方案——利用阿里云云解析实现DDNS

            各位都是程序员,工作中是不是遇到个类似情况.在家里研究的一些开源代码或写的一些demo或试验代码,在工作中正好需要参考一下,但是在家里的电脑上.           虽然这些都可以用云 ...

  7. 【Swift 4.0】扩展 WCDB 支持 SQL 语句

    前言 入坑 wcdb 有两个月了,整体来说还是很不错的,具体优点可以参考文档说明,由于官方明确说明不支持 SQL 只好自己写一个扩展支持一下了

  8. json文件格式详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  9. python xlwt模块生成excel文件并写入数据 xlrd读取数据

    python中一般使用 xlwt (excel write)来生成Excel文件(可以控制单元格格式),用 xlrd 来读取Excel文件,用xlrd读取excel是不能对其进行操作的. 1.xlrd ...

  10. RCTF 2017 easyre-153

    die查一下发现是upx壳 直接脱掉 ELF文件 跑一下: 没看懂是什么意思 随便输一个数就结束了 ida打开 看一下: pipe是完成两个进程之间通信的函数 1是写,0是读 fork是通过系统调用创 ...