前端html学习笔记

HTML

HTML5:语义化标签, HTML5是多个技术的总称
网站前端三层!!!

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


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


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

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


  • 标签:强制换行
br>  强制换行,无法通过css样式改变 严禁出现在页面中,通常只出现在非专业程序员页面中
  • ,标签:加粗文本
<b>b> b标签为HTML5之前的元素,被废弃
<strong>strong> 建议使用strong标签,语义化强
  • ,标签:文本倾斜
<i>i>    i元素表示外文词汇或科技术语,实际作用是倾斜
<em>em>     建议使用em标签,语义强调
  • ,标签:删除线
<s>s>     s标签从语义上来说表示不准确的删除
<del>del>     建议使用del标签,语义强调,表示删除相关文字
  • ,标签:下划线
<u>u>	   下划线
<ins>ins> 下划线  从语义上来说,强调此段文本
  • 标签:相对字体较小
<small>small>
  • ,标签:上标,下标
<sub>sub>    数学中的下标
<sup>sup>    上标   常见用于温度
  • 标签:没有任何实际作用,语义上也是表示一段普通文本,经常用来设置css样式
<span>span>

原则上只能放文本内容,不能放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>   表示计算机代码片段
  • 标签:表示编程语言中的变量
<var>var>    表示编程语言中的变量
  • 标签:表示程序或计算机的输出
<samp>samp>    表示程序或计算机的输出
  • 标签:英文范畴
<kdb>kdb>
  • 标签:表示缩写,没有什么实际作用,简单文本缩写而已
<abbr>abbr>
  • 标签:表示定义术语,就是一般的倾斜,语义上就是一个词或短语的文本
<dfn>dfn>
  • 标签:实际作用就是""双引号,表示引用来自其他地方的内容
<q>q>
  • 标签:实际作用倾斜,语义上表示引用其他作品的标题
<cite>cite>
  • 元素:注音,表示语言元素,常用于小学,幼儿园课本
<ruby><rp><rt>yīngrp>rt><rp><rt>rp>rt>
ruby>
  • 标签:设置文字的方向

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

  1. rtl 从右向左
  2. ltr 从左向右
<bdo dir="rtl">bdo>
  • 元素:给文本加上一个黄色背景黑色字,语义上为与上下文相关而突出的文本。用于记号
<mark>mark>
  • 标签:表示日期和时间
<time>time>

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

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

<p>p>
  • 标签:最常用的标签元素,用于页面布局,HTML5后因为语义化标签的原因,被各类文档元素代替,和p标签区别是上下文之间没有空隙,换行效果和br一样
<div>div>
  • 标签:实际作用和p元素一样,有段落空隙的功能,还包含了首位缩进功能
<blockquote>blockquote>    表示引用大段的其他处的内容
  • 标签:实际作用就是保留编辑器排版样式包括空格符等,适合简单排版,高度复杂无法使用
<pre>pre>

  • 标签:实际作用是一条分隔线,意图呈现上下文主题的分隔,后期可通过div设置宽高背景色等方法实现hr效果
 hr width="宽度" size="粗细" color="颜色" align="水平对齐方式left/center默认/right" >
    • ,
      1. ,
      2. 标签

    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 dt dd三个元素是一起的,但dt dd并不是一定都要出现

    <dl><dt><dd>dd>dt>dl>
    
    • 元素:插图,一般用于图片布局
    <fighre>
    	<figcaption>figcaption>
    figure>
    

    表格元素

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

    HTML 表格有两类单元格

    • 表头单元 - 包含头部信息(由 th 元素创建)
    • 标准单元 - 包含数据(由 td 元素创建)
    <table border="1">  table表示表格
      <thead>     thead:表示标题行,页眉
        <tr> 		tr:表示行
          <th>Monthth>      th:表示标题行单元格
          <th>Savingsth>
        tr>
      thead>
     <tbody>     tbody:表格主体
        <tr>
          <td>Januarytd>   td:表示单元格
          <td>$100td>
        tr>
        <tr>
          <td>Februarytd>
          <td>$80td>
        tr>
      tbody>
      <tfoot>      tfoot:表格页脚
        <tr>
          <td>Sumtd>
          <td>$180td>
        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  表示表格标题
    

    你可能感兴趣的:(前端html学习笔记)