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. 英语口语练习系列-C06-购物

    <水调歌头>·苏轼 明月几时有,把酒问青天. 不知天上宫阙,今夕是何年? 我欲乘风归去,又恐琼楼玉宇, 高处不胜寒. 起舞弄清影,何似在人间! 转朱阁,低绮户,照无眠. 不应有恨,何事长向 ...

  2. Python开发【字符串格式化篇】

    1.百分号 __author__ = "Tang" # + 号 拼接 msg = "i am " + " tang" print(msg) ...

  3. centos7下kubernetes（14。kubernetes-DNS访问service）

    我们在部署kubernetes时,会自动部署dns组件,其作用是通过dns解析的方法访问service coredns是一个DNS服务器,每当有新的service被创建,kube-dns会添加该ser ...

  4. js 获取纯web地址栏中URL传参

       function GetQueryString(name)    {         var reg = new RegExp("(^|&)"+ name +&quo ...

  5. Linux内存管理 (25)内存sysfs节点解读

    1. General 1.1 /proc/meminfo /proc/meminfo是了解Linux系统内存使用状况主要接口,也是free等命令的数据来源. 下面是cat /proc/meminfo的 ...

  6. maven压缩js css

    maven压缩<plugin> <!-- YUI Compressor Maven压缩插件 --> <groupId>net.alchim31.maven</ ...

  7. try.dot.net 的正确使用姿势

    [简介] 微软官方前不久发布了 try.dot.net 这个有趣的网址,开始只是图个新鲜看了一下,后面通过自身实践过后,发现这着实算是个“有趣”的站点! 首先我们大概地列举一下这个站点能给我们带来什么 ...

  8. Quick Sort(Java)

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

  9. python对 if __name__=='__main__'的理解

    对于学过其他编程语言的人来说都知道程序都是从main函数开始执行的,而对于python来说他并没有主函数,他不像其他语言需要需要转化为二进制文件 然后才能执行,他时通过翻译器从第一行开始逐行执行,所以 ...

  10. HTTP协议中的短轮询、长轮询、长连接和短连接,看到一篇文章有感

    关于短轮询.长轮询 短轮询主要是前端实现,JS写个死循环,不停的去请求服务器中的库存量是多少,然后刷新到这个页面当中,这其实就是所谓的短轮询. 长轮询主要取决于服务器,在长轮询中,服务器如果检测到数据 ...