HTML其实还是蛮容易学习的，无非就是一些标签、格式的填写，大学的时候也做过网站设计，所以这里主要记录一些常用的HTML标签、属性以及书写方法等。
一、常见HTML格式
主要包含文件type，html标签、head标签、body标签三个主题标签，其中Head主要包含字符集、描述、关键字等信息，而Body标签里是HTML的主要内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

二、head标签

1、自闭合标签
（1）<meta>标签
    <meta charset="UTF-8"> ##设置html内容字符集
    <meta http-equiv="refresh" content="3"> ##每隔3秒刷新一次  
    <meta http-equiv="refresh" content="3;Url=http://www.hao123.com">  ##隔3秒刷新并跳转值url指定网页
    <meta name="keywords" content="测试网页,网页头部"> ##指定网页关键字，利于SEO，网页搜索排序
    <meta name="description" content="描述信息">  ##指定网页描述信息
（2）link
    <link rel="shortcut icon"  href="image/fac.ico">  ##头部图标
（3）stype
（4）script
2、主动闭合标签
（1）title
    <title>网页头部标题内容</title>   ##网页头部显示内容　　
三、body标签
1、a标签：
定义超链接，最重要的属性为href,超链接和锚使用

##普通超链接

<a href="http://www.hao123.com" target="_blank">  中国人</a>

##通过a标签做锚点

<a href="#id1" > 第一章 </a>

<a href="#id2"> 第二章 </a>

<a href="#id3"> 第三章 </a>

<div id="id1" style="height:100px"> 第一章内容 </div>

<p id="id2"style="height:300px"> 第二章内容 </p>

<div id="id3"style="height:500px"> 第三章内容 </div>

2、p标签：
定义段落，不换行,段落段落之间有间距

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

3、br标签：
换行标签

<p>段落标签，不<br>换行</p>

4、h标签：
标题标签，从h1-h6表示字体从大到小，加粗显示

<h1>中国人</h1>

<h2>中国人</h2>

<h3>中国人</h3>

<h4>中国人</h4>

<h5>中国人</h5>

<h6>中国人</h6>

5、span标签
白板，行内标签，段与段之间只有空格，不换行

<span>中国人</span>

<span>中国人</span>

<span>中国人</span>

6、div标签
白板，块级标签

<div>中国人</div>

<div>中国人</div>

<div>中国人</div>

7、input标签
标准输入框

<input type="text"  name="username" value="Tom" ><br>

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

<input type="button" value="注册"  >

<input type="submit" value="提交"  >

<input type="reset" value="重置"  >

<input type="checkbox" name="双选" value="1" checked="checkted" >

<input type="radio" name="单选" value="1" checked="checkted" >

<input type="file" name="fname" enctype="multipart/form-data" >

8、form标签
表单使用,get方式提交数据拼接显示在url，post方式提交数据不拼接显示在url上（更安全）

<form action="http://www.hao123.com" method="get">

    <input type="text"  name="username" value="Tom" ><br>

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

    <input type="button" value="注册"  >

    <input type="submit" value="提交"  >

    <input type="checkbox" name="双选"  value="1" >

    <input type="radio" name="单选"  value="1" >

</form>

9、textarea标签
接受多行文本输入，其中可以输入多行数据

<textarea  name="username" >默认值</textarea>

10、select标签

下拉框标签，通过option指定下拉框内容

<select name="city"  >

    <option value="1" selected="selected">北京</option>

    <option value="2">上海</option>

    <option value="3">南京</option>

</select>

<select name="city" size=10 mutiple="mutiple">

    <option value="1" selected="selected">北京</option>

    <option value="2">上海</option>

    <option value="3">南京</option>

</select>

<select name="city">

    <optgroup label="省分">

        <option value="1">北京</option>

        <option value="2">上海</option>

        <option value="3">南京</option>

     </optgroup>

</select>

11、img标签
图片标签

<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" >

<img src="file:///C:/Users/Desktop/001.jpg">

<a href="http://www.hao123.com">

    <img src="001.jpg" style="height: 200px;width: 200px" title="名称" alt="描述">

</a>

12、ul标签
无序列表，对应的li标签标记列表行

<ul>

    <li>第一行</li>

    <li>第二行</li>

    <li>第三行</li>

</ul>

13、ol标签
有序列表，对应的li标签标记列表

<ol>

    <li>第一行</li>

    <li>第二行</li>

    <li>第三行</li>

</ol>

14、dl标签
分层列表，用dt标签表示标题，用dd标签表示列表内容

<dl>

    <dt>第一层</dt>

    <dd>1.第一层列表</dd>

    <dd>2.第一层列表</dd>

    <dd>3.第一层列表</dd>

    <dt>第二层</dt>

    <dd>1.第二层列表</dd>

    <dd>2.第二层列表</dd>

    <dd>3.第二层列表</dd>

</dl>

15、table标签
表格标签，通过tr表示行，td表示单表格

（1）第一种table写法

<table border="1.5">

    <tr>

        <td>第一个行第一个表格</td>

        <td>第一个行第二个表格</td>

        <td>第一个行第三个表格</td>

        <td>第一个行第四个表格</td>

    </tr>

     <tr>

        <td>第二个行第一个表格</td>

        <td>第二个行第二个表格</td>

        <td>第二个行第三个表格</td>

        <td>第二个行第四个表格</td>

    </tr>

</table>

（2）第二种table写法

<table border="1.2">

    <thead>

        <tr>

            <th>表头1</th>

            <th>表头2</th>

            <th>表头3</th>

            <th>表头4</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>第一列数据</td>

            <td>第二列数据</td>

            <td>第三列数据</td>

            <td>第四列数据</td>

        </tr>

        <tr>

            <td>第一列数据</td>

            <td>第二列数据</td>

            <td>第三列数据</td>

            <td>第四列数据</td>

        </tr>

    </tbody>

</table>

<td colspan="2">第一个行第二个表格</td>　　 ##横向合并合并单元格
<td rowspan="2">第一个行第四个表格</td>　　##纵向合并单元格

16、lable标签
用于标记文本输入

<label for="username"> 用户名: </label>

<input id="username"type="text"  >

17、fieldset标签

用于文本框

<fieldset>

    <legend>

        登陆

    </legend>

    <label for="username"> 用户名: </label>

    <input id="username"type="text"  ><br>

    <label for="password"> 密&nbsp;&nbsp;&nbsp;码: </label>

    <input id="password"type="password"  >

</fieldset>

Web前端学习——HTML的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  3. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  4. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  5. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  10. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

随机推荐

  1. 读书笔记-你不知道的JS上-声明提升

    变量声明提升 Javascript代码一般情况下是由上往下执行的,但是有些情况下不成立. a = 2; //变量声明被提升在当前作用域顶部 var a; console.log(a); console ...

  2. Eclipse+Spring+SpringMVC+Maven+Mybatis+MySQL+Tomcat项目搭建

    ---恢复内容开始--- 1. 建表语句及插入数据 CREATE TABLE `book_user` ( user_id INT(11) NOT NULL AUTO_INCREMENT, user_n ...

  3. SSM框架中的注解，配置和控制器相关笔记

    常规SSM实例 探索SSM理论的前提,应该是在对框架基础的运作方式有一定了解,以下是个人Android后台项目,用SSM框架快速搭建,以下是代码,主要 观察结构. 代码结构: model实体类 Ida ...

  4. SpringMVC自定义配置消息转换器踩坑总结

    问题描述 最近在开发时候碰到一个问题,springmvc页面向后台传数据的时候,通常我是这样处理的,在前台把数据打成一个json,在后台接口中使用@requestbody定义一个对象来接收,但是这次数 ...

  5. Azure ARM虚拟机部署反恶意软件-安全扩展

    Azure虚拟机,默认情况下没有安装杀毒软件.如果您有此需求可以通过Azure 扩展进行安装,有关Azure反恶意软件的官方说明请参考:https://docs.azure.cn/zh-cn/secu ...

  6. eclipse中删除多余的tomcat server

    在eclipse菜单中选择Window--Show View--Server--Servers,打开这个服务窗口,将多余的服务删除即可. 如果每次启动中太卡没反应,那就是服务没选择好,或是端口冲突的原 ...

  7. String类型

    String字符串的length属性返回的是该字符串里面16位字符的数量,如果字符串包含double-byte的字符,那么返回的数量可能不对   字符串一旦创建就修改不了 var lang = “Ja ...

  8. Android中常用的URI

    使用URI需要注意:当应用需要和手机里的文件或者程序互动时需要为该应用增加权限.在AndroidManifiest.xml文件中的根元素中增加如下配置 例如: 1.当应用需要读取.添加联系人时: 授予 ...

  9. threejs 组成的3d管道，寻最短路径问题

    threejs 里面的3d管道的每个节点ID是唯一的,且对应x,y,z坐标.那么当需要从A点到B点的时候,可能出现有多条路径可走,此时便需要求出最短行走路径,因此用到一个寻路径算法.我们将问题简化如下 ...

  10. 采用Vue2.0开发的分页js组件

    2017-11-17 19:14:23 基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js 由于项目需求,要求使用 Vue2.0 开 ...