HTML基础1——常用的标签，表格，内联框架

本文本用于本人学习笔记的整理。

webstorm的一些快捷键

复制当行：ctrl+d
删除当行：ctrl+y
同时编辑：alt键按住去选择

HTML

• 超文本语言
  不区分大小写，建议小写
  内容在标签里面，标签分为双标签和单标记

• html中在前标签中可包含属性和值，值用“”引起来，多个属性用空格隔开，属性不区分书讯
  < html >

• html的基本结构
  包括文档类型声明，文档标题，文档内容。

    
    


    
    aaa

• head表情用来定义头部，是头部元素的容器，可以引用脚本、指示浏览器在哪里找到样式表。下面这些标签可用在 head 部分：< title >、< meta>、< link>、< style>、 < script>
• head里面的lang 为声明主要语言，为english，只是声明更友好，不影响显示效果
• meta charset=“utf-8”：是文档的属性，表明文档使用的编码
• title：显示在浏览器上面的标题，必须有
• meta
  元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
  常见的meta有
  Keywords(关键字)　
  keywords用来告诉搜索引擎你网页的关键字是什么。
  < meta name=“keywords” content=“web前端开发”>
  description(网站内容描述)
  description用来告诉搜索引擎你的网站主要内容。
  < meta name=“description” content=“北京尚学堂,web前端培训”>
• 标签可以相互嵌套，注意层次关系
• 语义化标签：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等
  
  

常用标签

图片 < img >

江图片加载到页面中
必须属性 src：存储图片的位置
常用属性：
width，height, alt（图片加载失败时的显示），title（鼠标停留时的显示）
< img src=“URL” width=“300” alt=”加载失败”/>

超链接 < a> < /a>

< a href="" target="" title=””>文本< /a>
href属性：链接URL
target属性：目标，可取值_blank（弹出一个新的窗口）,_self（覆盖自己）等
name属性：锚点名称（用来快速定位到本页面的某个位置）
title属性：定义了鼠标经过时的提示文字
锚点举例：

< h3> < a href="#life"> 4 个人生活< /a>< /h3>
个人生活

则在h3的个人生活那会有超链接跳转到本页的个人生活那里。

水平分割线：hr

在 HTML 页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。

属性：

1. align：水平对齐方式，默认居中
2. width：水平线的长度，可取像素（px）和百分比（%）
3. size：水平线的高度
4. color：颜色

示例——使水平线在页面中间显示，它的宽度为页面的50%

< hr align="center" width="50%" / >

格式化标签

通过标签可以看出意思

地址 address

< address>
北京海淀区。西三旗桥东。神州科技园
< /address>

原始字符串 pre

被包围在 pre 元素中的文本通常会保留空格和换行符
示例——用pre定义有换行的文本
< body>
< pre>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
< /pre>
< /body>

文本格式化标签

块级元素和行内元素

1.块级元素独占一行，行内元素在同一行显示
2.块级元素默认宽度为100%，行内元素由内容撑开
3.块级元素可以设置宽高，行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
5.块级元素默认的display为block，行内元素的display为inline
6.块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本
7.常见的块级元素有h1-h6，p，div等，行内元素有a，em，b，i，u等

列表标签

列表分为有序列表和无序列表

• 无序列表

    
    
第一项
           
    
第二项
    
第三项

< li>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

• 有序列表

    
第一项
    
第二项
    
第三项

< li>的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3…）
a 表示列表项目用小写字母标号（a,b,c…）
A 表示列表项目用大写字母标号（A,B,C…）
i 表示列表项目用小写罗马数字标号（i,ii,iii…）
I 表示列表项目用大写罗马数字标号（I,II,III…）

• 自定义列表
  定义列表默认为两个层次，第一层为列表项标签< DT>，第二层为注释项标签< DD>

    
第1项
    
注释1
    
第2项
    
注释2
    
第3项
    
注释3

表格 table

table

定义一个表格

caption

用来定义表格的标题

tr,td

tr: 定义行元素，有几行，就有几个tr标签
td: 列元素标签，有几列，就有几个td标签，属性和tr一样

colspan rowspan

单元格的跨列，跨行合并属性，都在td里面才有.
在进行合并的时候，就会多出来一个占位，所有原来本身的某列元素，就需要去掉。

表格如图：

iframe 内联框架

相当于把别人做好的页面内嵌进来，是body的子级，成为一个元素在body里面。
属性
①width 可设置内联框架的宽
②height 可设置内联框架的高
③name 设置框架名称
④src 设置页面的路径 必须有
⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）

将百度的首页内连进来，并且定义了一个标签，点击就可以在某个框架内打开一个页面。