前端html学习笔记

HTML

HTML5:语义化标签， HTML5是多个技术的总称

网站前端三层！！！

 1.html  超文本标记语言，提供网站主体，核心规范（标签元素）div header p aside footer


 2.css  层叠样式表，通过它为网页设置丰富多彩的样式。


 3.javascript （逻辑层，行为层） 一种面向对象的语言，通过它来实现一些网页的动态效果和交互功能。

文本元素：就是把一段文本设置成相匹配的结构含义。

• </br>标签:强制换行

</br>  强制换行，无法通过css样式改变 严禁出现在页面中,通常只出现在非专业程序员页面中

• <b>,<strong>标签：加粗文本

<b></b> b标签为HTML5之前的元素，被废弃
<strong></strong> 建议使用strong标签，语义化强

• <i>,<em>标签：文本倾斜

<i></i>    i元素表示外文词汇或科技术语，实际作用是倾斜
<em></em>     建议使用em标签，语义强调

• <s>,<del>标签:删除线

<s></s>     s标签从语义上来说表示不准确的删除
<del></del>     建议使用del标签，语义强调，表示删除相关文字

• <u>,<ins>标签：下划线

<u></u>	   下划线
<ins></ins> 下划线  从语义上来说，强调此段文本

• <small>标签：相对字体较小

<small></small>

• <sub>,<sup>标签：上标，下标

<sub></sub>    数学中的下标
<sup></sup>    上标   常见用于温度

• <span>标签：没有任何实际作用，语义上也是表示一段普通文本，经常用来设置css样式

<span></span>

• <a>标签 ：超链接

原则上只能放文本内容，不能放div等元素内容

 <a href="规定链接指向的页面的 URL。" target="规定在何处打开链接文档。" title="鼠标上移时提示的信息"></a>
    href:链接的url
    title:鼠标上移时提示的信息
    name:HTML5 中不支持。规定锚点链接的名称。
    target:打开链接文档的方式
    1._blank   在一个新窗口载入链接指向页面的URL.
    2._self   默认  在当前窗口打开
    3._parent _top  都是给予框架集页面的  _parent表示在父窗口打开文档 _top表示在顶层窗口打开文档(在h5中框架被废弃.只能使一个新的 iframe元素) 

相对路径与绝对路径

1. 相对路径：相对于链接页面的另一个页面路径（ 相对路径的条件是文件必须都在一个目录下）
2. 绝对路径：直接从file://磁盘符开始的完整路径

同一目录：href="xx.html"或href="./xx.html"
子目录：href="文件名/xx.html"
孙子目录：href="文件名/文件名/xx.html"
父目录：href="../xx.html"
爷爷目录：href="../../xx.html"

• <code>标签：表示计算机代码片段

<code></code>   表示计算机代码片段

• <var>标签：表示编程语言中的变量

<var></var>    表示编程语言中的变量

• <samp>标签：表示程序或计算机的输出

<samp></samp>    表示程序或计算机的输出

• <kdb>标签：英文范畴

<kdb></kdb>

• <abbr>标签：表示缩写，没有什么实际作用，简单文本缩写而已

<abbr></abbr>

• <dfn>标签：表示定义术语，就是一般的倾斜，语义上就是一个词或短语的文本

<dfn></dfn>

• <q>标签：实际作用就是""双引号，表示引用来自其他地方的内容

<q></q>

• <cite>标签：实际作用倾斜，语义上表示引用其他作品的标题

<cite></cite>

• <ruby>，<rp>，<rt>元素：注音，表示语言元素，常用于小学，幼儿园课本

<ruby>
	英<rp><rt>yīng</rp></rt>
	语<rp><rt>yǔ</rp></rt>
</ruby>

• <bdo>标签：设置文字的方向

必须设置属性dir，有两个值

1. rtl 从右向左
2. ltr 从左向右

<bdo dir="rtl"></bdo>

• <mark>元素：给文本加上一个黄色背景黑色字，语义上为与上下文相关而突出的文本。用于记号

<mark></mark>

• <time>标签:表示日期和时间

<time></time>

分组元素：其实就是用来组织相关内容的HTML5元素，进行清晰有效的归类

• <p>标签:将内部文本形成一个段落，段落和段落之间保持一定的空隙

<p></p>

• <div>标签：最常用的标签元素，用于页面布局，HTML5后因为语义化标签的原因，被各类文档元素代替，和p标签区别是上下文之间没有空隙，换行效果和br一样

<div></div>

• <blockquote>标签：实际作用和p元素一样，有段落空隙的功能，还包含了首位缩进功能

<blockquote></blockquote>    表示引用大段的其他处的内容

• <pre>标签：实际作用就是保留编辑器排版样式包括空格符等，适合简单排版，高度复杂无法使用

<pre></pre>

• <hr>标签：实际作用是一条分隔线，意图呈现上下文主题的分隔,后期可通过div设置宽高背景色等方法实现hr效果

 </hr width="宽度" size="粗细" color="颜色" align="水平对齐方式left/center默认/right" >

• <ul>,<li>，<ol>,<li>标签

ul表示无序列表，li表示内部的列表项
ol表示有序列表

//无序列表
<ul>
	<li></li>
</ul>


//有序列表
<ol start="6" type="a">
	<li value="10"></li>
</ol>

start:从第几个序列开始统计
type：表示列表的编号类型比如 A,1,II...
reversed：倒叙 浏览器支持度不高
value:属于li元素,强行设置列项目的编号

• <dl>,<dd>,<dt>元素

说明列表 dl dt dd三个元素是一起的，但dt dd并不是一定都要出现

<dl><dt><dd></dd></dt></dl>

• <fighre>，<figcaption>元素:插图，一般用于图片布局

<fighre>
	<figcaption></figcaption>
</figure>

<table>表格元素

一个标准HTML表格一定包含一个tbody !!!

HTML 表格有两类单元格

• 表头单元 - 包含头部信息（由 th 元素创建）
• 标准单元 - 包含数据（由 td 元素创建）

<table border="1">  table表示表格
  <thead>     thead：表示标题行，页眉
    <tr> 		tr:表示行
      <th>Month</th>      th:表示标题行单元格
      <th>Savings</th>
    </tr>
  </thead>
 <tbody>     tbody：表格主体
    <tr>
      <td>January</td>   td：表示单元格
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>      tfoot：表格页脚
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>



*thead  表示标题行  页眉
*tbody  表示主题
*tfoot  表示表格页脚
(限制某一部分的区域 写动态生成的时候一定要写  虽然tbody不写会自动出现，但是会出现多个，会浪费浏览器启动的时间，所以是不合理的，一定要自己写    动态添加信息时在JS中添加，用到$符号)
*border 边框大小 (px(粗细)/solid(直线)/dashed(虚线)/颜色
*width 宽度
*height 高度
*bgcolor 背景颜色 可以用英文/RGB
*background 背景图片 需要用路径表示出图片所在 类似与url/src
*cellspacing 表格里单元格之间的间距
*cellpadding 表格里单元格边框与内容的距离
*align 水平对齐方式 用在table标签时表示表格的对齐方式，用在tr标签里时表示当前行的对齐方式 用在td标签时标签该单元格的对齐方式  left（默认）/center/right
*valign 垂直对齐方式 top（通常）/middle/bottom
*colspan 跨列合并单元格 几个
*rowspan 跨行合并单元格 几个
*padding 内边距 有上下左右四面
*margin 外边距 有上下左右四面 也可为负值
*col  表示一列
*colgroup  表示一组列
*caption  表示表格标题

文档元素：文档元素的主要作用就是划分各个不同的内容，让整个布局清晰明快，让整个布局具有语义化，进一步代替div。

1. <h1~h6>标签：表示标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2. <header>标签：表示头部

<header></header>

3. <nav>标签：表示导航栏

<nav></nav>

4. <footer>标签：表示底部

<footer></footer>

5. <section>标签：表示一个重要概念或主题

<section></section>

6. <article>标签：表示一段独立的文章内容

<article></article>

7. <address>标签：表示一段文档或联系信息

<address></address>

8. <aside>标签：表示周边的内容，和主题相关的内容

<aside></aside>

9. <hgroup>标签：表示一组内容

<hgroup></hgroup>

10. <details>,<summary>标签：<details>表示生成一个区域，用户可以展开下拉详细信息,details默认标题为详细信息,<summary>用于修改<details>默然标题内容。

<details>
	<summary></summary>
</details>