一、基本概念

　　1.HTML：超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。

　　2.HTML文档的后缀名：.html 或 .htm

　　3.标签：由尖括号包围的关键词，比如 <html>

　　4.元素：从开始标签（start tag）到结束标签（end tag）的所有代码。比如：< p>hello world< /p>

　　5.空元素：在开始标签中进行关闭。例如：换行 <br/>

　　6基本格式：

<!DOCTYPE html> //声明HTML5文档

<html>  //根元素

    <head>

            <!-- 元数据 -->

    </head>

    <body>

            <!-- 页面内容 -->

    </body>

</html>

　　7.注释格式：

　　　　<!-- 注释内容 -->

二、HTML属性

　　属性可以在元素中添加附加信息，一般位于开始标签，以键值对的形式存在。

　　例如：<a href="http://www.baidu.com">百度一下</a>

    常用属性：

　　 class为html元素定义一个或多个类名（classname）(类名从样式文件引入)

　　 id     定义元素的唯一id

　　style规定元素的行内样式（inline style）

　　 title描述了元素的额外信息 (作为工具条使用)

三、<head>标签

1.<title> 

<title>我是标题</title>

<title>标签的作用：

　　1.显示在浏览器工具栏上

　　2.网页被收藏时默认的名字

2.<base> 指定了HTML文档中所有的链接标签的默认链接:

3.<link> 链接到样式表

例：从外部文件引入css样式

<link rel="stylesheet" type="text/css" href="css.css">

4.<style> 添加css样式

5.<meta> 元数据

　　5.1 为搜索引擎添加关键词，通过浏览器搜索这些关键词就能找到这个HTML文档

例：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

　　 5.2 描述网页的内容

例：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

　　5.3 定义网页的作者

例：<meta name="author" content="Name">

　　5.4 编码格式

例：<meta charset="utf-8">

6.<script> 定义JavaScript脚本

四、<body>标签

　　1.<h> 标签：标题

　　 6个级别：<h1> - <h6>

<!DOCTYPE html>

<html>

<head>

    <title>    </title>

</head>

<body>

    <h1>标题1</h1>

    <h2>标题2</h2>

    <h3>标题3</h3>

    <h4>标题4</h4>

    <h5>标题5</h5>

    <h6>标题6</h6>

</body>

</html>

　　2.<hr> 标签:水平线

　　3.<br> 标签:换行

　　4.<p> 标签：段落

　　5.文本格式化　

<b>加粗文本</b><br>

<strong>加粗文本</strong><br>

<big>文本放大</big><br>

<small>文本缩小</small><br>

<i>斜体文本</i><br>

<em>斜体文本</em><br>

<sub>下</sub>标<br>

标<sup>上</sup><br>

<pre>空   格</pre>

<del>删除效果</del>

<!-- 计算机/编程代码样式 -->

<code>计算机输出</code><br>

<kbd>键盘输入</kbd><br>

<tt>打字机文本</tt><br>

<samp>计算机代码样本</samp><br>

<var>计算机变量</var><br>

<address>

    地址：石家庄 河北 中国

</address>

<p><bdo dir="rtl">倒叙显示</bdo></p>

　　6.<a> 标签：链接

<a href="http://www.baidu.com">百度一下</a>

　　属性：在新窗口打开

　　　　例：<a href="http://www.baidu.com/" target="_blank">百度一下</a>

　　<a>标签的作用：

　　　　1.链接：<a href="http://www.baidu.com">百度一下</a>

　　　　2.锚：<a href="#tips">转到id为tips的部分</a>

　　7.<img> 标签：图像

<img src="mayun.jpg" title="马云" alt="Ma Yun" height="140" width="121" >

　　　　title属性：当鼠标放在图片上的时候显示的内容

　　　　alt 属性：当图片加载失败的时候显示的属性

　　　　height width属性：设置图片的高和宽

　　8.<table> 标签：表格

　　　　

    <table border="1">

        <caption>表格标题</caption>

        <tr>

            <th>姓名</th>

            <th>性别</th>

        </tr>

        <tr>

            <td>曹操</td>

            <td>男</td>

        </tr>

        <tr>

            <td>貂蝉</td>

            <td>女</td>

        </tr>

    </table>

　　常用标签:

　　　　<table> 定义表格

　　　　<caption> 定义表格标题

　　　　<th> 定义表头(文本加粗)

　　　　<tr> 定义行

　　　　<td> 定义内容

　　常用属性：

　　　　border="1" 定义表格边框

　　　　colspan="2" 跨2行

r　　　　owspan="2" 跨2列

　　9 <ul> <ol> 标签：列表

　　9.1 <ul> 无序列表：用点标记顺序

       <ul>

       　　 <li>咖啡</li>

       　　 <li>牛奶</li>

    　　</ul>

　　9.2 <ol> 有序列表：用阿拉伯数字标记顺序

    <ol>

        <li>绿茶</li>

        <li>红茶</li>

    </ol>

　　<ol> 属性：

　　　　type="A"|"a"|"I"|"i"

　　9.3 <dl> 自定义列表

    <dl>

        <dt>一级内容</dt>

        <dd>二级内容</dd>

    </dl>

　　10.<div> 标签

　　　　<div> 元素没有特定的含义，常用于文档布局。

　　11<span> 标签

　　　　没有特定的含义，用于为部分文本设置样式属性

　　12<form> 标签:表单

　　　　12.1 <input>

　　　　<form>        
　　　　　<!-- 文本 -->   <!-- value 属性值为文本框中的默认值 -->

        username:<input type="text" name="username" value="请输入用户名"><br>

        <!-- 密码 -->

        password:<input type="password" name="password"><br>

        <!-- 单选 -->

        <input type="radio" name="sex" value="male">男<br>

        <input type="radio" name="sex" value="femail">女<br>

        <!-- 复选 -->

        <input type="checkbox" name="language" value="Bike">Java<br>

        <input type="checkbox" name="language" value="Car">Python<br>

        <input type="checkbox" name="language" value="Car">JavaScript<br>

        <!-- 提交 -->

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

        <!-- 重置 -->

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

    </form>

　　12.2 <select>

        <select name="city">

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

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

            <option value="shenzhen">深圳</option>

            <option value="xian" selected>西安</option>

    　　</select>

　　13 <textarea> 多行文本

        <textarea rows="10" cols="10">

        　　默认文本内容

    　　</textarea>

　　14 <iframe> 标签:框架

　　可以在同一个浏览器窗口插入其他HTML页面

<iframe src="http://www.baidu.com" width="900" height="300" frameborder="0"></iframe>

　　

四、块级标签与内联标签

1.块级标签：自动地在元素的前后添加空行

　　 <div></div> <p></p> <h1></h1> <ul></ul> <ol></ol> <dl></dl>

2.内联标签：

　　<a></a> <img> <input> <span></span> <select></select> <textarea></textarea>

HTML学习笔记（基础部分）的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. Python学习笔记基础篇——总览

    Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...

  3. 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)

    注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...

  4. 《python基础教程（第二版）》学习笔记 基础部分（第1章）

    <python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...

  5. Java学习笔记——基础篇

    Tips1:eclipse中会经常用到System.out.println方法,可以先输入syso,然后eclipse就会自动联想出这个语句了!! 学习笔记: *包.权限控制 1.包(package) ...

  6. iOS学习笔记——基础控件（上）

    本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...

  7. iOS开发学习笔记:基础篇

    iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...

  8. Python学习笔记——基础篇【第一周】——变量与赋值、用户交互、条件判断、循环控制、数据类型、文本操作

    目录 Python第一周笔记 1.学习Python目的 2.Python简史介绍 3.Python3特性 4.Hello World程序 5.变量与赋值 6.用户交互 7.条件判断与缩进 8.循环控制 ...

  9. Python学习笔记——基础篇【第四周】——迭代器&生成器、装饰器、递归、算法、正则表达式

    目录 1.迭代器&生成器 2.装饰器 a.基本装饰器 b.多参数装饰器 3.递归 4.算法基础:二分查找.二维数组转换 5.正则表达式 6.常用模块学习 #作业:计算器开发 a.实现加减成熟及 ...

  10. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

随机推荐

  1. MyEclipse创建maven项目时报： org.apache.maven.archiver.MavenArchiver.getManifest 错误

    创建项目报错,如图: 原因就是maven的配置文件不是最新的,MyEclipse2014解决方法: 1.help ->Install New sitie... 2.点击add 3.填写name和 ...

  2. Go的学习 sort

    1.排序操作主要都在 sort包中,导入就可以使用了 2.sort.Ints对整数进行排序 package main; import ( "fmt" "sort" ...

  3. 【转】SAP 各种记账凭证的更改&冲销

    一:更改 1,已经过帐的 FB02. 过完帐的允许更改的地方有限,只有凭证抬头文本,参照,分配,文本,原因代码等 2,预制凭证的更改. FBV2. 预制凭证可以更改的地方很多,只有凭证编码+公司代码+ ...

  4. java ajax返回 Json 的 几种方式

    原文:https://blog.csdn.net/qq_26289533/article/details/78749057 方式 1. : 自写代码转 Json 需要  HttpHttpServlet ...

  5. ConcurrentSkipListMap--跳表的简单使用

    import java.util.Map; import java.util.concurrent.ConcurrentSkipListMap; /** * 跳表的使用 */ public class ...

  6. java中switch的用法以及判断的类型有哪些（String\byte\short\int\char\枚举类型）

    switch关键字对于多数java学习者来说并不陌生,由于笔试和面试经常会问到它的用法,这里做了一个简单的总结: 能用于switch判断的类型有:byte.short.int.char(JDK1.6) ...

  7. JSP和selevt 生命周期详解（JSP的生命周期和select很像，jsp底层就是一个selevt）

    JSP: JSP的生命周期指从创建到销毁的整个过程.分为以下几个阶段: 1:编译阶段:servlet引擎编译servlet源文件,生成servlet类.当浏览器请求JSP页面时,JSP引擎会首先去检查 ...

  8. appium---学习

    一直想学但是没有时间,今天看到个不错的链接保存一下. 学习链接:http://www.testclass.net/appium_base/appium-base-summary

  9. 【HDOJ6601】Keen On Everything But Triangle（主席树）

    题意:给定一个长为n的序列,有q次询问,每次询问[l,r]这段区间内挑三个数,能组成的三角形的最大周长,无解输出-1 n,q<=1e5,a[i]<=1e9 思路:题解写法和我的不太一样 先 ...

  10. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...