一、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. 无法定位序数242于动态链接库,Anaconda3\Library\bin\mkl_intel_thread

    python.exe-找不到序数:无法定位序数242与动态链接库libiomp5md.dll上.或无法定位程序输入点 mkl_dft_create_descriptor_md于动态链接库 Ancond ...

  2. 放弃dagger?Anrdoi依赖注入框架koin

    Koin 是什么 Koin 是为 Kotlin 开发者提供的一个实用型轻量级依赖注入框架,采用纯 Kotlin 语言编写而成,仅使用功能解析,无代理.无代码生成.无反射. 官网地址 优势 依赖注入好处 ...

  3. python基础--python基本知识、七大数据类型等

    在此申明一下,博客参照了https://www.cnblogs.com/jin-xin/,自己做了部分的改动 (1)python应用领域 目前Python主要应用领域: 云计算: 云计算最火的语言, ...

  4. Python打印到屏幕_读取键盘输入

    Python打印到屏幕_读取键盘输入: print( ): 打印输出括号中的值 print("hello") # hello strs = 'hello' print(" ...

  5. Skill Virtuoso IC6.1.7 的所有View Type

    https://www.cnblogs.com/yeungchie/ 可以用deGetAllViewTypes()来获取. "graphic" "layout" ...

  6. 读书笔记《数据结构与算法JavaScript描述》第一章

    第一章JavaScript的编程环境和模型 1.2JavaScript编程实践 1.2.1 声明和初始化变量 JavaScript中的变量默认为全局变量,如果初始化未被声明的变量,该变量就成了一个全局 ...

  7. Golang | Go语言多态的实现与interface使用

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第11篇文章,我们一起来聊聊golang当中多态的这个话题. 如果大家系统的学过C++.Java等语言以及面向对象的 ...

  8. Hive和HBase

    1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被转化为M ...

  9. JDBC报错:Cannot find class: com.mysql.jdbc.Driver

    连接数据库的jar出现异常(通常报错:Cannot find class:com.mysql.jdbc.Drive), 问题:Connector的jar已经导入,还是出现 Cause: java.sq ...

  10. 2020牛客暑期多校训练营(第八场)K-Kabaleo Lite题解

    K-Kabaleo Lite 题目大意: 给出每种菜品的利润以及碟数,要求我们给每个客人至少一碟菜,要求从1号菜品开始给,给的菜品的号码是连续的,每个客人同号码的菜都只能给一碟.求能招待客人的最大数量 ...