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. C语言pow()函数的计算精度问题

    编程计算 a+aa+aaa+-+aa-a(n个a)的值,n和a的值由键盘输入.例如,当n=4,a=2,表示计算2+22+222+2222的值. 程序运行结果示例: Input a,n: 2,4↙ su ...

  2. 微信小程序开发框架技术选型

    目前微信小程序开发有三种方式,原生微信小程序,使用mpVue或wepy微信小程序开发框架. 三种开发方式横向对比资料如下:  

  3. Python_字符串连接

    #join() 与split()相反,join()方法用来将列表中多个字符串进行连接,并在相邻两个字符串之间插入指定字符 li=['apple','peach','banana','pear'] se ...

  4. Docker的安装和测试

    1,Docker安装 Docker是啥,以及其与虚拟机的对比,就不介绍了,网上有很多资源可以学习和了解. 本篇文章重点介绍Docker的安装和测试使用. Docker的安装,分为离线安装和在线安装两种 ...

  5. MySQL提示“too many connections”的解决办法

    今天生产服务器上的MySQL出现了一个不算太陌生的错误"Too many connections".平常碰到这个问题,我基本上是修改/etc/my.cnf的max_connecti ...

  6. SSM-SpringMVC-23:SpringMVC中初探异常解析器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客要讲的是异常解析器,SimpleMappingExceptionResolver简单映射异常解析器 可 ...

  7. Manifest文件的最新理解

    今天看了Manifest文件内容的相关视频,感觉对知识的理解深刻了一些: 首先,先来说说这个文件的作用,这个文件可以说是聚集了很多个标签,其实对于每个主标签,在将来编译的时候,都会被处理成一个类,而标 ...

  8. 设计模式(Design Patterns)Java版

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  9. Android base-adapter-helper 源码分析与扩展

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44014941,本文出自:[张鸿洋的博客] 本篇博客是我加入Android 开源项 ...

  10. 【BZOJ 3924】[Zjoi2015]幻想乡战略游戏

    题目: 题解: 对点分树理解加深了233,膜拜zzh干翻紫荆花. 感谢zzh的讲解. 首先优化基于传统DP,假设树不发生变化,我们就可以利用DP求出带权重心. 考虑修改,我们思路不变,还是从root开 ...