辣鸡翔
辣鸡翔

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

HTML基本要素

HTML：Hyper-Text Markup Language

第一个简单的HTML页面

<span style="font-family:'宋体';">第一个</span><span style="font-family:Calibri;">HTML</span><span style="font-family:'宋体';">页面</span><span style="font-family:Calibri;">

Hello,HTML and CSS

文档的基本结构

·文档类型声明

·文档头

·文档体

·文档元素

Web前端攻城狮-Day1-HTML基础_第1张图片

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

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

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

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

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

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

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

examples:

·”UTF-8”/>没有内容也不需要有内容

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

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

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

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

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

HTML全局属性

Global attributes

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


HTML文档类型、注释、HEAD

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

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

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

HTML的注释：


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

·

标题，字体逐渐减小

·

段落，或者一段文本

·
换行

·

水平的分割线

·Bold text加粗

·Italic text斜体

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

·Emphasized text和i元素效果一样，语义不一样

·Smaller text字体更小的文本

·(Deleted text)需要删除的文本

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


HTML图片Image

…………”/>

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

必须添加alt属性


HTML超链接Hyperlink

文档外链接：

百度

……”/>

第一课

Emain to XXX

文档内导航：

常见问题在当前文档中实现本地导航的跳转

去底部

回顶部

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

综合：常见问题


HTML列表LIST

Unordered list无序列表

  • Item

  • Item

Ordered list有序列表

  1. First

  2. Second

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

    1. 中除了plain text还可以放置嵌套的
        或者
          ，从而表示树形数据结构


          HTML表格TABLE

          Table可用来表二维数据结构

          基本的Table tags

          ·

          ·

          table row

          ·

          、、

          ·对多列进行分组

          、


          HTML表单Form

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

          姓名：”text”/>

          简历：

          简历附件：”file”/>


          文档对象模型DOM

          My title

          My link

          My header


          Web前端攻城狮-Day1-HTML基础_第2张图片

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

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

          其他几个概念

          ·父节点parent、子节点child

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

          ·兄弟节点sibling

          紧邻兄弟节点adjacent sibling


          HTML

          和

          可以通过

          和 将HTML 元素组合起来。

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

          HTML 内联元素

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

          HTML

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

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

          如果与 CSS 一同使用，

          元素可用于对大的内容块设置样式属性。

          元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
          标题

          ·

          table head

          ·

          		tale data

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

          ·对多行进行分组
          元素进行文档布局不是表格的正确用法。
          元素的作用是显示表格化的数据。

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

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


          HTML5中各种语义化分段元素

          常见的语义化分段元素：,

          ,
          ,