HTML标记语言，网页制作的第一步。

什么是HTML呢？查百度

基础语法

常用标签

HTML是超文本标记语言，HTML不用编译，直接在浏览器中执行，HTML是一个文本文件。

HTML基本结构，标签，元素，属性，注解

<html>

<head>

 <title>标题</title>

</head>

<body>

</body>

</html>

标签属性格式：

<标签名 属性名=“属性值”></标签名>

文档类型声明：

<!DOCTYPE> 声明必须放在html文档第一行，不是html标签

编码文件

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

标题标签，段落标签，预格式化标签，水平线

<h1></h1> <p> <pre></pre> <hr/>

<i></i>

<b></b>

<ins>

<del>

<sub>

<sup>

无序列表：

<ul>

 <li></li>

</ul>

disc 圆点

square 正方形

circle 空心圆

有序列表:

<ol>

 <li></li>

</ol>


<dl>

<dt>

<dd>

</dl>

结构，表现，行为

图片标签

<img src="" alt=""/>

相对路径，绝对路径

超链接标签：

<a href=""> 内容 </a>

href target title name

_self _blank _top _parent

定义锚：

<a href="#锚名"></a>

<a name="锚名" ></a>

邮件链接：

<a href="mailto:邮件地址"></a>

下载：

<a href="xxx.rar"></a>

表格的基本结构，操作表格，属性，跨行，嵌套

<table>

<tr>

<td>

<table>

 <tr>

  <td></td>

 </tr>

</table>

添加标题

<caption></caption>

加载过长，内容过多

表格分：表头，主体，脚注

thead tbody tfoot

<table>

 <caption><caption>

 <thead>

 <tr>

  <th></th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td></td>

 </tr>

 </tbody>

 <tfoot>

 </tfoot>

</table>

表格属性

width表格宽度，align对齐方式，border表格边框的宽度，Bgcolor表格背景颜色，cellpadding内容之间的空白，cellspacing单元格之间的空白，frame和rules。

跨列属性: colspan

跨行属性: rowspan

表格嵌套：

<table>

 <tr>

<td></td>

<td>

<table>

<tr>

<td></td>

<td></td>

<tr>

</table>

</td>

</tr>

</table>

表单结构，表单常用元素，表单交互属性

语法：文本域，单选框，复选框，按钮，列表

<form>

...

</form>

input

select

option

textarea

optgroup

<input type="" name=""/>

text password file checkbox radio button submit reset hidden image

name maxlength size value placeholder


<input type="image" name="" src="imageurl" />

<input type="hidden" name="" value="" />

传输给服务器

下拉菜单和列表标签

<select>

 <option value=""></option>

 <option value=""></option>

</select>

name multiple可以多选 size显示条目

<option>标签属性

selected value

分组下拉菜单

<select name="">

 <optgroup label="组1">

  <option value=""></option>

 </optgroup>

 <optgroup label="组2">

  <option value=""></option>

 </optgroup>

</select>

多行文本域

<textarea name="" rows="" cols="">

</textarea>

name placeholder rows cols


<form action="" method="" name="" >

</form>

action method name target enctype

网页结构：

<body>

// 头部

<div></div>

// 主体

<div></div>

// 页脚

<div></div>

</body>

<div>

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

</dl>

</div>

总结：

html表单，表单应用场景，表单工作原理

<input type="" name="" />

text password file checkbox radio button submit reset hidden image

<form>

<input type="text" name=""/>

</form>

name, maxlength, size, value, placeholder

<form>

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

</form>

<form>

<input type="file" name=""/>

</form>

<form>

<input type="radio" name="" value="" checked/>

</form>

<form>

<input type="checkbox" name="" value="" checked/>

</form>

<input type="button" name="" value=""/>

type="submit"

type="reset"

<input type="image" name="" src="imageurl"/>

<input type="hidden" name="" value=""/>

html表单

input select option optgroup textarea

<select>

 <option value=""></option>

</select>

name multiple size

selected value

<textarea name="" rows="" cols="" >

</textarea>

name placeholder rows cols

<form action="" method="" name="">

</form>

action method name targer enctype

url get,post form_name _blank,_self,_parent,_top

text/plain

multipart/form-data



<!DOCTYPE html>

<html>

<head>

     <!-- 网页头部内容 -->

<title>标题</title>

</head>

<body>

     <!-- 网页主体内容 -->

</body>

</html>

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

感谢！承蒙关照！您真诚的赞赏是我前进的最大动力！

这是一个有质量，有态度的公众号

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

HTML基础系列的更多相关文章

  1. 【Basics of Entity Framework】【EF基础系列1】

    EF自己包括看视频,看MSDN零零散散的学了一点皮毛,这次打算系统学习一下EF.我将会使用VS2012来学习这个EF基础系列. 现在看看EF的历史吧: EF版本 相关版本特性介绍 EF3.5 基于数据 ...

  2. C#基础系列——Attribute特性使用

    前言:上篇 C#基础系列——反射笔记 总结了下反射得基础用法,这章我们来看看C#的另一个基础技术——特性. 1.什么是特性:就博主的理解,特性就是在类的类名称.属性.方法等上面加一个标记,使这些类.属 ...

  3. C#基础系列——小话泛型

    前言:前面两章介绍了C#的两个常用技术:C#基础系列——反射笔记 和 C#基础系列——Attribute特性使用 .这一章来总结下C#泛型技术的使用.据博主的使用经历,觉得泛型也是为了重用而生的,并且 ...

  4. C#基础系列——委托实现简单设计模式

    前言:上一篇介绍了下多线程的相关知识:C#基础系列——多线程的常见用法详解,里面就提到了委托变量.这篇简单介绍下委托的使用.当然啦,园子里面很多介绍委托的文章都会说道:委托和事件的概念就像一道坎,过了 ...

  5. C#基础系列——委托和设计模式（二）

    前言:前篇 C#基础系列——委托实现简单设计模式 简单介绍了下委托的定义及简单用法.这篇打算从设计模式的角度去解析下委托的使用.我们知道使用委托可以实现对象行为(方法)的动态绑定,从而提高设计的灵活性 ...

  6. C#基础系列——再也不用担心面试官问我“事件”了

    前言:作为.Net攻城狮,你面试过程中是否遇到过这样的问题呢:什么是事件?事件和委托的区别?既然事件作为一种特殊的委托,那么它的优势如何体现?诸如此类...你是否也曾经被问到过?你又是否都答出来了呢? ...

  7. C#基础系列——异步编程初探：async和await

    前言:前面有篇从应用层面上面介绍了下多线程的几种用法,有博友就说到了async, await等新语法.确实,没有异步的多线程是单调的.乏味的,async和await是出现在C#5.0之后,它的出现给了 ...

  8. C#基础系列——一场风花雪月的邂逅：接口和抽象类

    前言:最近一个认识的朋友准备转行做编程,看他自己边看视频边学习,挺有干劲的.那天他问我接口和抽象类这两个东西,他说,既然它们如此相像, 我用抽象类就能解决的问题,又整个接口出来干嘛,这不是误导初学者吗 ...

  9. 2015年12月28日 Java基础系列（六）流

    2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流

  10. c#基础系列（转）

    转:http://www.cnblogs.com/landeanfen/p/4953025.html C#基础系列——一场风花雪月的邂逅:接口和抽象类 前言:最近一个认识的朋友准备转行做编程,看他自己 ...

随机推荐

  1. JavaScript（二、BOM 浏览器对象模型）

    一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...

  2. django管理数据库之中文字符编码问题

    django中通过models创建数据库字符编码文字mysql数据库中默认的字符编码都为latin1,插入中文时会出现以下的错误类型 1366 - Incorrect string value: '\ ...

  3. arcis api for js 值 3.17 本地部署

    1. 引言 在学习 ArcGIS API 的过程中,如果我们引用在线的 API,在没有网络或者网络差的情况下,会影响到我们的学习效率,本篇文章就是为了解决这个问题.下载 ArcGIS API 之后,部 ...

  4. 项目在tomcat里运行一段时间总是自动崩掉的问题排查与解决

    最近的检验系统上线一段时间后,发现系统访问不了,tomcat总是会自动崩掉,一般遇到这种问题,程序员的第一反应都肯定是内存溢出. 确实是,但是java里内存分好几种,堆内存.栈内存.静态内存区等等,下 ...

  5. java中Iterator和ListIterator的区别与联系

    首先,为什么需要使用迭代器Iterator,原有的for循环和for each不能满足需求吗? 那是因为Iterator模式是用于遍历集合类的标准访问方法.它可以把访问逻辑从不同类型的集合类中抽象出来 ...

  6. 附录C--拉格朗日对偶性

    1.原始问题 假设$f(x)$,$c_i(x)$,$h_j(x)$是定义在$R^n$上的连续可微函数,$x \in R^n$.考虑以下三类优化问题. 1.无约束的优化问题: \begin{align* ...

  7. RestTemplate 微信接口 text/plain HttpMessageConverter

    一.背景介绍 使用 Spring Boot 写项目,需要用到微信接口获取用户信息. 在 Jessey 和 Spring RestTemplate 两个 Rest 客户端中,想到尽量不引入更多的东西,然 ...

  8. centos7系统日志时间与系统时间相差8小时

    场景:当我们修改完系统时间的时区后,我们去查看我们的系统日志的时间发现时区还是在之前的系统时间时区. [root@vp-n ~]# ls -l /etc/localtime lrwxrwxrwx 1 ...

  9. MAC下的mysql忘记密码该怎么办？？

    不要着急,不要慌,好多人会忙手忙脚,以为自己安装了一个假软件,其实是你打开的方式不对而已! step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击 ...

  10. BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案

    BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案 题意: 约翰的牧场里有 N 台机器,第 i 台机器的工作能力为 Ai.保罗阴谋破坏一些机器,使得约翰的工作效率变低.保罗可 ...