HTML学习笔记day1

来源：互联网发布：58淘宝美工学徒新骗局编辑：程序博客网时间：2024/06/17 18:08

HTML简介

什么是HTML?

HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML 元素

HTML 元素语法

HTML 元素以开始标签起始、HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 提示：使用小写标签

HTML 标签对大小写不敏感，但建议使用小写。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=”value”。

HTML标题

HTML水平线

<hr> 标签在 HTML 页面中创建水平线。

HTML注释

HTML 文本格式化

HTML 文本格式化标签

下面通过一个例子来记住

欢迎来到小明酱的世界！    <br />    <!-- 定义粗体文字 -->    <b>欢迎来到小明酱的世界！</b>    <br />    <!-- 定义着重文字 -->    <em>欢迎来到小明酱的世界！</em>    <br />    <!-- 定义斜体文字 -->    <i>欢迎来到小明酱的世界！</i>    <br />    <!-- 定义小号文字 -->    <small>欢迎来到小明酱的世界！</small>    <br />    <!-- 定义加重语气 -->    <strong>欢迎来到小明酱的世界！</strong>    <br />    <!-- 定义下标字 -->    大家好<sub>欢迎</sub>来到    <br />    <!-- 定义上标字 -->    大家好<sup>欢迎</sup>来到    <br />    <!-- 定义插入字 -->    <ins>欢迎</ins>    <br />    <!-- 定义删除字 -->    <del>欢迎来到</del>

HTML样式

属性

rel=”stylesheet”:外部样式表
type=”text/css”:引入文档的类型
margin-left:边距

三种样式表插入方式

通过例子来学习：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>样式</title>    <!-- 外部样式表 -->    <link rel="stylesheet" type="text/css" href="mystyle.css">    <!-- 内部样式表 -->    <style type="text/css">        p{            color: aqua;        }    </style></head><body>    <h1>标题h1</h1>    <p>欢迎来到极客学院</p>    <!-- 内联样式表 -->    <a href="http://www.baidu.com" style="color: darkorange ">点击我跳转到极客学院</a></body>

HTML链接

链接属性

文本链接
图片链接

属性

href属性：指向另一个文档的链接
name属性：创建文档内链接

image标签属性

alt：替换文本属性
width：宽
height：高

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>链接</title></head><body>    <a href="http://www.baidu.com">点击我</a>    <a href="http://www.baidu.com">        <img src="images/证件照.jpeg" width="100px" height="100px" alt="小明酱">    </a>    <br/>    <!-- 文档内的链接 -->    <a name="tips">hello</a>    <a href="#tips">跳转到hello</a></body></html>

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格和边框属性

<table border="1">

HTML 表格表头

<tr>    <th>Header 1</th>    <th>Header 2</th></tr>

HTML列表

HTML无序列表

<ul>    <li>Coffee</li>    <li>Milk</li></ul>

HTML有序列表

<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>

阅读全文

0 0