一、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. CentOS7编译安装php7.1配置教程详解

    这篇文章主要介绍CentOS7编译安装php7.1的过程和配置详解,亲测 ,需要的朋友可以参考. 1.首先安装依赖包: yum install libxml2 libxml2-devel openss ...

  2. Jenkins怎么安装？Jenkins控制台输出乱码怎么处理？Jenkins执行selenium脚本时浏览器不显示怎么处理？

    今天我们来看一看Jenkins的安装. 首先我们看一下Jenkins是什么,能够干什么.Jenkins呢是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开 ...

  3. 2020数字中国创新大赛虎符网络安全赛道-pwn count

    比赛结束前半个小时才看的题,等我做出来比赛已经结束了.难受Orz 本地文件无法执行,远程调试. 题目大概意思就是让你计算200道四则运算.(实际上格式是固定的.先乘一次然后再加两次).200道题都正确 ...

  4. 正在找工作的同学看过来，zozo最新的java面试题总会，学会月薪3万起！！！

    引言 为正在找工作的同学提供些许帮助,话不多说直接上题. 关注后私信我[资料]即可免费获取! 关注后私信我[资料]即可免费获取! 关注后私信我[资料]即可免费获取! 关注后私信我[资料]即可免费获取! ...

  5. css中的名词

    用到的单词 current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出 ...

  6. python基础--迭代器、生成器

    (1)迭代器 可迭代对象和迭代器的解释如下: ''' 什么是对象?Python中一切皆对象,之前我们讲过的一个变量,一个列表,一个字符串,文件句柄,函数名等等都可称作一个对象,其实一个对象就是一个实例 ...

  7. matplotlib柱状图、面积图、直方图、散点图、极坐标图、箱型图

    一.柱状图 1.通过obj.plot() 柱状图用bar表示,可通过obj.plot(kind='bar')或者obj.plot.bar()生成:在柱状图中添加参数stacked=True,会形成堆叠 ...

  8. VulnHub靶场学习_HA: Pandavas

    HA: Pandavas Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-pandavas,487/ 背景: Pandavas are the warr ...

  9. P2489 [SDOI2011]迷宫探险 概率dp

    LINK:迷宫探险 题目中要求在最优的策略下的最大概率 而并非期望概率. 一个坑点 题目中虽然没有明说 但是 探险者是知道地图的模样和每个陷阱的概率的. 所以才有最优策略一说. 最优策略尽管不知道可以 ...

  10. spring中IOC入口与加载步骤

    ApplicationContext applicationContext =new ClassPathXmlApplicationContext("spring-context.xml&q ...