HTML基础知识学习笔记
1、什么是HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建、描述网页的标准标记语言。
2、HTML有什么用
HTML 可以用来来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析
3、HTML的元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
4、HTML的使用
-
基本骨架
<!DOCTYPE html><!--声明为 HTML5 文档--> <html><!-- 元素是 HTML 页面的根元素--> <head><!-- 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8,一般也用来插入js,css脚本--> <meta charset="utf-8"> <title>title</title><!--元素描述了文档的标题--> </head> <body><!--元素包含了可见的页面内容--> </body> </html>
-
常用标签
<!--------------------------------关于文本的标签-------------------------------------> <!--标题标签h1->h6--> <h1>这是一个一级标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3> <h4>这是一个四级标题</h4> <h5>这是一个五级标题</h5> <h6>这是一个六级标题</h6> <!--水平线标签--> <hr> <!--段落标签--> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <!--换行标签--> <br> <!--文本格式化标签--> <b>加粗文本</b> <i>斜体文本</i> <sub> 下标</sub> <sup> 上标</sup> <!-----------------------------引入外部资源的标签------------------------------------> <!--链接标签--> <a href="url">链接文本</a> <a href="https://www.baidu.com">这是一个链接</a> <!--链接标签的常用属性 target: * _blank:新页面跳转 *_self:当前页面跳转(默认) --> <!--图像标签--> <img src="/images/logo.png" width="258" height="39" /> <!----------------------------------表格标签---------------------------------------> <table><!--定义一个表格--> <tr> <th>Header</th><!--定义表头--> <th>Header</th> </tr> <tr><!--定义一行--> <td>row 1</td><!--定义一行内的一列--> <td>row 1</td> </tr> <tr><!--第二行--> <td>row 2</td><!--第二行里的列--> <td>row 2</td> </tr> </table> <!----------------------------------列表标签---------------------------------------> <!--无序列表--> <ul> <li>Coffee</li> <li>Milk</li> </ul> <!--有序列表--> <ol> <li>Coffee</li> <li>Milk</li> </ol> <!--自定义列表--> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <!----------------------------------表单标签---------------------------------------> <form><!--主要是和input标签搭配使用,input标签有很多属性可以完成相对应的表单操作--> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
-
大多数HTML标签都有的属性
属性 描述 class 为html元素定义一个或多个类名(classname)(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式(inline style) title 描述了元素的额外信息 (作为工具条使用) -
head标签详解
head标签里常用的标签
<head> <base href="url" target="_blank"> <!--该标签作为HTML文档中所有的链接标签的默认链接--> <link rel="stylesheet" type="text/css" href="mystyle.css"><!--引入外部资源--> <script></script><!--编写js代码、引入外部js代码--> <style></style><!--编写css代码、引入外部css代码--> </head>
-
HTML中的区块元素
HTML 可以通过==
== 和 == ==将元素组合起来。块级元素: 占一行的,不会在下一行开始
区级元素:占多行,,会以下一行开始
HTML 分组标签(本身并无特定的含义,可用作文本的容器)
标签 div 定义了文档的区域,块级 (block-level) span 用来组合文档中的行内元素, 内联元素(inline)