Day2   HTML基本标签元素

HTML:  超文本标记语言(HyperText   Mark-up  Language )

　　1.作用：写网页结构
 　　 2.HTML不区分大小写，建议小写
　　  3.文件后缀 .html  或者  .htm
　　  4.html由浏览器解析执行.  由上往下，由左往右

1) HTML标签  标记  :  用于描述功能的符号称为"标签"

<..>  组成HTML
双标记  封闭类型标记   如:<hn>,<p>
单标记  非封闭类型标记  空标记   <img>,<br/>

2) HTML元素  : 从标签开始到标签结束的所有内容
<p>             这是一个段落         </p>
元素的开始    元素的内容       元素的结束

某些HTML具有空内容,大多数HTML可拥有属性.

3)HTML的属性
语法：写在开始标签里面
属性="属性值"
一个标签可以有多个属性，用空格隔开，不区分前后顺序

属性和属性的值之间用等号链接
属性的值包含在引号当中
属性总是以名称/值对的形式出现

4)HTML注释

语法：
<!-- 注释的文本内容 -->      快捷键: Ctrl+/

注释不可以套在其他注释中.

5) 标题标签
h1-h6 (双标记)
属性：align="left|right|center"

6)段落标签
p   (双标记)
属性：align="left|right|center"

7)图片标签
img  (单标记)
属性：<img src="" alt="" title=""/>
src  : 路径
alt    :当图片不能正常显示，给予提示
title  : 鼠标悬停，给予提示给予提示

width;height: 图片宽高设置一个值就行,另外一个值会跟着等比例缩放.
       width="160"   heigh="160"   (不用加px)

1.相对路径 (网页地址)
    ( 同级,直接写;  
      下一级,先找复级"/" ;
      上一级,"../"  ;
      上两级,"../../";
      多级如上)
  2.绝对路径

8)强制换行<br/>标签:

单标记,没有任何属性      eg:<br/>*50:换行50

9)水平线<hr/>标签: (单标记)

默认整个网页一样宽的属性;
     <hr width="500" />   线的宽度   可取像素px和百分比 %
     <hr sixe="200"/>     线的高度
     <hr color="red"/>     线的颜色
     <hr  align="left"/>   水平对齐方式,默认居中

10)超链接<a>标签:

属性:

  • herf : 链接URL路径            相对路径  eg:<a href="xxx.html">相对路径</a>    (本地路径)
  • target:打开窗口   目标(默认值_self;  新窗口打开_blank,_parent,等)
  • title   :定义鼠标经过是提示信息
  • name:锚点   同一个页面做跳转

1.点击a  跳转到 a

<a herf="#me">点我<a/>
   <a herf=" " name="me">到我<a/>

2.点击a跳转到块级元素
      <a href="#me">点击</a>
      <p id="me">到我</p>
   包含英文  数字 下划线
   不能以数字开头

　　补充:  <a herf="#">: 空链接  回到网页顶部

一.DOCTYPE 文档类型声明 (DTD文档模型)

作用:告诉浏览器按照当前标准解析代码
  注意:不是HTML标签

3)<head lang="en">
   en:英文,只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容     
   zh-CN:中文

4)title:定义文档的标题

一个网页只能有一个标题,head里面一定要加title,写与网页相关的关键词有利于SEO优化.

5)<meta charset="UTF-8">  
    META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

6)<meta>:
  元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
    常见的meta有
     1.Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。
    <meta name="keywords" content="web前端,SulierZ的博客">
    2.description(网站内容描述)  description用来告诉搜索引擎你的网站主要内容。
     <meta name="description" content="SulierZ的博客,web前端学习">
    3.author作者   标注网页的作者
    <meta name="author" content="root,root@xxxx.com">

  二. 文本格式化标签  (一般浏览器默认字体为16px)
<b></b>
<i></i>
<u></u>
<em><em/>  : 强调倾斜显示
<strong></strong>:强调加粗显示
<sub></sub>:   定义下标
<sup></sup>:   定义上标
<del></del>:   定义删除字 同<s></s>
<ins></ins>:   定义插入内容
<pre></pre>:   被包围在 pre 元素中的文本通常会保留空格和换行符

三.语义化标签   a   address   h1-h6  
  也就是说我们看到a标签，并不能从直观意义上知道它是一个超链接，但是address，通过翻译，也能明白这是定义联系信息，这就是语义化的好处。它以斜体显示。

四:列表标签    网页中排版作用
列表分为三类：一是无序列表<ul>，一是有序列表<ol>  ,还有自定义列表<dl> ,.(列表项目标记<li>)

  • 无序列表<ul>:    ul>li*5 包含嵌套

<ul><li>的属性type 定义项目符号   UnorderList    List  块级元素    
      disc         实心圆(默认)
      circle       空心圆
      square       小方块
      none         不显示

  • 有序列表<ol>:  

<ol><li>的属性type 拥有的选项     OrderList
    1    表示列表项目用数字标号（1,2,3...）
    a    表示列表项目用小写字母标号（a,b,c...）
    A   表示列表项目用大写字母标号（A,B,C...）
    i    表示列表项目用小写罗马数字标号（i,ii,iii...）
    I    表示列表项目用大写罗马数字标号（I,II,III...）
start: 从第几个开始 取值number 　　　　倒序:reversed

  • 自定义列表<dl> :定义列表默认为两个层次，

第一层为列表项标签<DT>(主题)，第二层为注释项标签<DD>(内容描述)

五:表格table   (存储数据,展示数据)
    <tr>: 行
    <td>: 列
    <th>: 定义表格页眉单元格(默认水平居中且加粗)
    <caption>:定义表格标题
表格 table 属性:
    border:边框  默认没有边框 eg:border="1"
    width:宽度
    align:表格水平对齐方式   默认left    align="center"
    cellspacing: 单元格之间间距    cellspacing="0"
    cellpadding:内容距单元格距离    cellpadding="20"
表格行 tr 属性:
    height
    width:宽度
    align:表格水平对齐方式   默认left    align="center"
    valign: 垂直对齐方式    默认middle,top,bottom
表格列 td 属性:同tr
    colspan: 设置单元格跨列  
         水平合并,取值number  colspan="2" 水平合并3个单元格,  
    rowspan: 设置单元格跨行      
         垂直合并  rowspan="2"

六:HTML实体字符   当网页中一些字符不能正常显示时使用实体字符
    空格:&nbsp;
    <   :&lt;
    >   :&gt;
    &   :&amp;
    ?   :&copy;  (拼音打出"版权"即可)

七:内联框架Iframe（Inner Frame:在body里面嵌套一个网页)
    属性:
    ①width 可设置内联框架的宽
    ②height 可设置内联框架的高
    ③name 设置框架名称    
    ④src 设置页面的路径
    ⑤scrolling规定是否在 iframe 中显示滚动条
（yes，no，默认auto[自动]）
    ⑥frameborder规定是否显示框架周围的边框（1默认有边框,0）

Day2 HTML基本标签元素的更多相关文章

  1. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

  2. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  3. 详解HTML<head> 头标签元素的意义以及使用场景

    HTML<head>头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,he ...

  4. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  5. HTML5 标签元素的一些注意事项

    不运行写结束标记的元素(但标签元素): area.base.br.col.command.embed.hr.img.input.keygen.link.meta.param.source.track. ...

  6. HTML标签元素分类（HTML基础知识）

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

  7. Html常用标签元素

    Html常用标签元素 Html常用标签元素 常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档 <head></head> ...

  8. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  9. CSS选取第n个标签元素

    最近做一个项目,碰到这样的需求,需要选取某个元素的倒数第几个标签元素,想让他显示不同的样式 1.first-child first-child表示选择列表中的第一个标签.例如:li:first-chi ...

随机推荐

  1. Java探索之旅(17)——多线程(1)

    1.多线程  1.1线程 线程是程序运行的基本执行单元.指的是一段相对独立的代码,执行指定的计算或操作.多操作系统执行一个程序时会在系统中建立一个进程,而在这个进程中,必须至少建立一个线程(这个线程被 ...

  2. 10、RNA-seq for DE analysis training（Mapping to assign reads to genes）

    1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...

  3. js中的cookie的设置获取和检查

    设置cookiefunction setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays* ...

  4. 利用Hadoop自带example实现wordCount

    上次虽然把环境搭好了,但是实际运行起来一堆错误,下面简述一下踩的坑. 1.hadoop fs -put上传文件失败,WARN org.apache.hadoop.hdfs.server.datanod ...

  5. vim加亮和自动缩进

    修改/etc/vimrc 添加 set cindent syntax on

  6. JAVA IO包的整理---------InputStream和OutputStream

    一:OutPutStream类: public abstract class OutputStream extends Object implements Closeable, Flushable 这 ...

  7. CodeForces 131D【图特性+BFS】

    题意: 只有一个环,然后环都是0(环缩点相当于树的根),然后其余的输出到根的距离 思路: 可以从度为1的 开始搜 把那些分支全标记掉,然后再取没有标记掉的,BFS一下搞出距离. 具体这个标记: 倒着搜 ...

  8. loj#6517. 「雅礼集训 2018 Day11」字符串（回滚莫队）

    传送门 模拟赛的时候纯暴力竟然骗了\(70\)分-- 首先对于一堆\(g\)怎么计算概率应该很好想,用总的区间数减去不合法的区间数就行了,简而言之对\(g\)排个序,每一段长为\(d\)的连续序列的区 ...

  9. 洛谷P4287 [SHOI2011]双倍回文（回文自动机）

    传送门 听说有大佬用manacher$O(n)$过此题……太强啦…… 说一下PAM的做法吧.(看了题解之后发现)蛮简单的 我们肯定要先建出回文自动机的 然后如果是枚举每一个节点暴跳fail指针肯定得T ...

  10. 查询缓存及索引：MySQL系列之九

    一.MySQL的架构 连接器 连接池,安全认证.线程池.连接限制.检查内存.缓存 SQL接口 DML.DDL SQL解析器,对SQL语句的权限检查.解析为二进制程序 优化器,优化访问路径 缓存cach ...