Web前端攻城狮-Day1-HTML基础

HTML基本要素

HTML：Hyper-Text Markup Language

第一个简单的HTML页面

<!doctype html>

<html>

<head>

<title>第一个HTML页面</title>

</head>

<body>

<h1>Hello,HTML and CSS</h1>

</body>

</html>

文档的基本结构

·文档类型声明

·文档头

·文档体

·文档元素

Web前端攻城狮-Day1-HTML基础

在实际的编程中，“标记”和“元素”这两个概念会有所混淆

在实际的编程中，这两个概念是不加以区分的

但是严格的来定义的话，这两个概念是有所区别的

比如p标记它是有唯一性的，但是p元素它不是唯一性的

比如一个HTML文档中有很多段话，每一段话都可以由一个p元素来标记，每一个p元素都可以有自己特定的属性设置

标记相当于面向对象里的“类”，元素相当于“对象”或者“实例”

HTML单标记元素：不需要结束标记

examples:

·<meta charset=”UTF-8”/>没有内容也不需要有内容

·<img src=”a.jpg”width=”100”height=”200”/>相当于一个占位，它的内容通过它的src属性决定

·<link rel=”stylesheet”type=”text/css”href=”some.css”/>

tips:对于单标记元素，尽量在start tag的闭合之前加上/

·HTML5可以不加，但是XHTML强制需要

·明确表示元素结束，增加代码可读性

HTML全局属性

Global attributes

最常用的全局属性：id，class，style，title

HTML文档类型、注释、HEAD

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标记之前。该行声明了该HTML文档的文档类型，即告诉Web浏览器该HTML文档是根据哪个版本的HTML规范来写的。所有浏览器都支持<!DOCTYPE> 声明。

<!DOCTYPE> 声明没有结束标签。且<!DOCTYPE>声明对大小写不敏感。

HTML5规范对应的文档类型声明只有一种：

<!DOCTYPE html>

HTML的注释：

<!-comments-->

HTML标题、段落和文本格式化

·<h1><h2><h3><h4><h5><h6>标题，字体逐渐减小

·<p>段落，或者一段文本

·<br>换行

·<hr>水平的分割线

·<b>Bold text</b>加粗

·<i>Italic text</i>斜体

·<strong>Important text</strong>和b元素效果一样，但是语义不一样

·<em>Emphasized text</em>和i元素效果一样，语义不一样

·<small>Smaller text</small>字体更小的文本

·<del>(Deleted text)</del>需要删除的文本

·<ins>(Inserted text)</ins>插入的文本，样式是在文本的下方出现一条下划线

HTML图片Image

src属性表示目标图片的网络地址或者目标图片的web url

必须添加alt属性

HTML超链接Hyperlink

文档外链接：

<a href=”mailto:[email protected]>Emain to XXX</a>

文档内导航：

<a href=”#faq”>常见问题</a>在当前文档中实现本地导航的跳转

相当于鼠标拖动垂直导航条

综合：<a href=”http://abc.com/course/101#faq”>常见问题</a>

HTML列表LIST

Unordered list无序列表

<ul>

</ul>

Ordered list有序列表

<ol>

<li>First</li>

<li>Second</li>

</ol>

<ul>和<ol>可以用来表示线性数据结构，如一组数据内容，导航栏的各个子项，下拉列表的各个子项等

<li>中除了plain text还可以放置嵌套的<ul>或者<ol>，从而表示树形数据结构

HTML表格TABLE

Table可用来表二维数据结构

基本的Table tags

·<table>

·<caption>标题

·<tr>table row

·<th>table head

·<td>tale data

扩展：其他与table相关的HTML Tags

·对多行进行分组<thead>、<tbody>、<tfoot>

·对多列进行分组<colgroup>、<col>

HTML表单Form

<form>元素为用户输入创建HTML表单，用于向服务器提交数据

</form>

文档对象模型DOM

<!doctype html>

<html>

<head>

<title>My title</title>

</head>

<body>

<h1>My header</h1>

</body>

</html>

DOM模型将整个HTML文档看作是一个节点树的结构

这个节点树的根节点是document对象，而根元素是<html>元素

其他几个概念

·父节点parent、子节点child

·祖先节点ancestor、后代节点descendant

·兄弟节点sibling

紧邻兄弟节点adjacent sibling

HTML <div> 和 <span>

可以通过 <div> 和 <span> 将HTML 元素组合起来。

大多数HTML元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

HTML 内联元素

内联元素在显示时通常不会以新行开始。

HTML <div> 元素是块级元素，它是可用于组合其他HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table> 元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。当与CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

HTML5中各种语义化分段元素

常见的语义化分段元素：<body>,<section>,<article>,<aside>,<nav>

Web前端攻城狮-Day1-HTML基础

每一个分段元素都可以拥有自己独立的<header>和<footer>

HTML最佳实践

·根据应用场景和需求，建立合适的HTML标记结构，选择合适的HTML标记元素

·不要忘记文档类型的声明，文档开头应有<!doctype html>

·不要忘记字符编码的声明，如<head>元素中应添加<meta charset=”UTF-8”/>

·不要使用HTML5不再支持的Tag，例如<center>,<font>,<basefont>,<big>等

·不要使用HTML5不再支持的Tag属性，例如table、img等标记的align属性，border属性等

Web前端攻城狮-Day1-HTML基础

相关推荐