一、HTML：超文本标记语言，是一种标签语言，不是编程语言，显示数据有双标签<body></body> 和单标签<img src=# / >， 标签大小写都可以
通过浏览器解析HTML代码，在<body>标签中数据会被显示出来

<IDOCTYPE html>

<html>

    <head>

        title></title> 标题

    </head>

    <body>

        显示数据

    </body>

</html>

二、HTML常用的标签

<h1> ------> <h6>标题

    例：<h1>这是标题1<h1>

<hr>                横线

<br>                换行

<title></title>  标题头

<meta charsent="utf-8">   使用utf-8字符编码

<script type="text/javascrpe">   在网页弹出窗口

    alert("你被攻击了")

</script>

<p></p>         段落标签，会换行

<a></a>   链接标签 例：<a href="https://www.baidu.com">百度一下</a>

<img />     图片标签 例：<img src="图片地址" /> </img>

<img src=# width= "1000" height="1000">  改变图片大小

<!-- -->      注释标签

三、表格

<table border="1" cellspacing="10" cellpadding="10">

    <!--width   　　  表示表格的宽度

        border   　　　表示外边框的粗细

        cellspadding   内边框与外边框间距的大小

        cellpadding     内边框与数据内容的距离

    -->

    <tr>

        <th><!--表头（会加粗居中）-->

        </th>

    </tr>

    <tr><!--表示行-->

        <td style="

            font-synthesis: ; 字体

            font-size: ；字号

            color:; 字色

            border-bottom:1px dashed #ccc; 加一条虚线"><!--表示列-->

            这是表格

            &nbsp    表示空格

        </td>

    </tr>

</table>

　　1、合并列

<table border="1">

    <tr>

        <td colspan="2">1</td><!-- colspan 用于合并列 -->

    </tr>

    <tr>

        <td>3</td>

        <td>4</td>

    </tr>

</table>

　　2、合并行

<table border="1">

    <tr>

        <th>name</th>

        <th>age</th>

        <th>addr</th>

    </tr>

    <tr>

        <td>张三</td><!-- rowspan 用于合并行 -->

        <td rowspan="2">24</td>

        <td>qwe</td>

    </tr>

    <tr>

        <td>李四</td>

        <td>asd</td>

    </tr>

</table>

　　3、列表的有序无序

<table>

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

        <li>第一</li>

        <li>第二</li>

    </ul>

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

        <li>第一</li>

        <li>第二</li>

    </ol>

</table>

　　4、表单

表单：搜集用户的信息<br>

<form name="input_data" action="index.php" method="get">

    <!--

        action：表示数据提交到哪个页面

        method：提交数据的方式，get（数据参数拼接url），post（数据参数放在请求内容中，在url中看不到发送的数据）-->

    <label>姓名：</label>

    <input type="text" name="name"><!--文本域-->

    <br>

    <label>密码：</label>

    <input type="password" name="pwd">

    <br>

    <input type="radio" name="gender" value="1">男<br>  <!--按钮-->

    <input type="radio" name="gender" value="0">女<br>

    <input type="radio" name="gender" value="01">不知道<br>

    爱好：<br>

    <input type="checkbox" name="aihao" value="lanqiu">篮球<br>

    <input type="checkbox" name="aihao" value="zuqiu">足球<br>

    <input type="checkbox" name="aihao" value="pingpangqiu">乒乓球<br>

    提交：

    <input type="submit" name="sub" style="" value="提交"><br>

</form>

四、HTML元素分类：块级元素和内联元素

　　1、分类：

　　块级元素：标签元素会以新行开始或结束 <h1> <p> <table> 等，当前元素标签独占一行
　　内联元素：显示数据不会以新行开始 <a> <img> <td> 等，当前元素堆积在一起
　　<div> 块级元素，用于组合其他元素，方便统一设置属性或者样式
　　2、布局：
　　设计网页时，考虑到页面的美观。会设置页面的布局或者整体的一个布局
　　　　<table> <div>
　　3、框架：

　　<iframe src="URL" width="" height="" frameborder="">

　　</iframe>

　　4、事件：
　　需要去触发某些动作的发生，需要事件的支持

    <iframe src="www.baidu.com" width="100" height="400" onmouseover="alert('鼠标触碰弹窗')"></iframe>

    <img src="#" onerror="alert('找不到图片弹窗')">

    <input type="text" name="name" onfocus="alert('点击弹窗')">

    <input type="text" name="pwd" onchange="alert('改变弹窗')">

    <input type="text" name="pwd" oninput="alert('输入弹窗')">

笔记：html基础的更多相关文章

  1. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  2. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  3. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  4. （转）深度学习word2vec笔记之基础篇

    深度学习word2vec笔记之基础篇 声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...

  5. 深度学习word2vec笔记之基础篇

    作者为falao_beiliu. 作者:杨超链接:http://www.zhihu.com/question/21661274/answer/19331979来源:知乎著作权归作者所有.商业转载请联系 ...

  6. Django学习笔记（基础篇）

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  7. C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  8. C#学习笔记（基础知识回顾）之值传递和引用传递

    一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...

  9. C#学习笔记（基础知识回顾）之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

  10. 1 TensorFlow入门笔记之基础架构

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

随机推荐

  1. JMS微服务开发示例（一）Hello world

    网关部署 1.在网关服务器上,安装.net core 3.1运行环境: 2.到 https://www.cnblogs.com/IWings/p/13354541.html 下载Gateway.zip ...

  2. 如何导入spring 的jar包到eclips

    https://www.cnblogs.com/xxuan/p/6949640.html

  3. cmd 安装第三方库问题

    pip install 包名 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com 一定要指定 信任豆瓣源,不然就算换了源 ...

  4. go项目dockerfile最佳实践

    1. 前言 2. 不需要cgo情况下的最佳实践 3. 依赖cgo情况下的最佳实践 1. 前言 这几天在构建golang编写的web项目中,关于dockerfile编写的一些总结 可能是单纯我比较菜(大 ...

  5. PHP xpath() 函数

    定义和用法 xpath() 函数运行对 XML 文档的 XPath 查询.高佣联盟 www.cgewang.com 如果成功,该函数返回 SimpleXMLElements 对象的一个数组.如果失败, ...

  6. Chrome IDM下载插件安装使用方法

    一. 下载IDM (1)官方网站: http://www.internetdownloadmanager.com/download.html 二.安装IDM IDM安装 (1)运行安装程序    前进 ...

  7. P4463 [集训队互测2012] calc 拉格朗日插值 dp 多项式分析

    LINK:calc 容易得到一个nk的dp做法 同时发现走不通了 此时可以考虑暴力生成函数. 不过化简那套不太熟 且最后需要求多项式幂级数及多项式exp等难写的东西. 这里考虑观察优化dp的做法. 不 ...

  8. 3.28 省选模拟赛 染色 LCT+线段树

    发现和SDOI2017树点涂色差不多 但是当时这道题模拟赛的时候不会写 赛后也没及时订正 所以这场模拟赛的这道题虽然秒想到了LCT和线段树但是最终还是只是打了暴力. 痛定思痛 还是要把这道题给补了. ...

  9. PCL使用RANSAC拟合三位平面

    1.使用PCL工具 //创建一个模型参数对象,用于记录结果 pcl::ModelCoefficients::Ptr coefficients(new pcl::ModelCoefficients); ...

  10. 事件 - DOM编程

    何为 DOM 事件,HTML DOM 使JavaScript 有能力对 HTML 事件做出反应. 1. 事件流 一个 DOM 事件可以分为捕获过程.触发过程.冒泡过程. 下面一个<a>元素 ...