一、基本概念

  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. Android 线程池概念及使用

    一:使用线程池的原因 在android开发中经常会使用多线程异步来处理相关任务,而如果用传统的newThread来创建一个子线程进行处理,会造成一些严重的问题: 在任务众多的情况下,系统要为每一个任务 ...

  2. linux性能分析工具Top

  3. psfstriptable - 从控制台字体中移走嵌入的Uniocde字符表

    总览 psfstriptable 字体文件 [输出文件] 描述 psfstriptable 命令从 字体文件 或者标准输入(此时的 字体文件 是单个破折号(-))读取一个可能含有嵌入Unicode字体 ...

  4. Kintex7 XC7K325T 板卡三剑客

    (226)基于Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 四路光纤卡   (227)基于Xilinx Kintex-7 FPGA K7 XC7K325T的FMC U ...

  5. 一、UC中文调试

    一.只支持UC浏览器,版本号6.2.3831.3,复制resources.pak到UC安装目录下,覆盖同名文件即可

  6. HTML基础:用表单写一个简易登录页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. [Luogu1821][USACO07FEB]银牛派对Silver Cow Party

    由题意可知,我们需要求的是很多个点到同一个店的最短距离,然后再求同一个点到很多个点的最短距离. 对于后者我们很好解决,就是很经典的单源最短路径,跑一边dijkstra或者SPFA即可. 然而对于前者, ...

  8. 洛谷P4331[BOI2004] sequence

    博客复活? 这个题很模板啊.随便上个左偏树.之前第一遍写对了.然后今天翻出来又写了一遍发现了一个奇奇怪怪的问题. 对比如下 上面的是AC 下面的WA 真的是一个很蠢的问题...你TM堆顶都弹出来了,堆 ...

  9. Spring入门-框架搭建

    步骤: 导包 四个核心包: 日志包:由于市场上已经有更好的日志包,所以spring不用自己的,而是用apache的日志. 搞对象 由于spring是用来装对象的容器,所以得搞个对象让它装 书写配置文件 ...

  10. Linux命令"ls"进阶说明

    pwd:the current working directory cd -: return to the previous working directory Filenames that begi ...