html

---恢复内容开始---

Day1 认识标签

1.web标准

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

样式标准：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指CSS。

行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。

2.HTML

英文 Hyper Text Markup Language   超文本标签语言

3.html骨架

    

4.html 标签关系

嵌套关系：

并列关系：    

5.在sublime页面输入以下两个单词html: 5    或者 ！ ，然后按下tab键即可生成HTML骨架。

6.字符集  UTF-8

7.HTML标签的语义化   即标签的含义

8.HTML标签

  （1）排版标签

       文本内容

   (2)段落标签

     

文本内容

   (3)水平线标签

     

---

是单标记

   (4)换行标签

      
是单标记

   (5) div span标签  (没有语义，用来布局)

     

这是头部

      文本内容

9.文本格式化标签

  

标签	显示效果
	粗体(推荐使用strong)
	斜体 (推荐使用em )
	加删除线(推荐使用del)
	加下划线(推荐使用u)

10.标签属性

<标签名  属性1 =“属性1” 属性2 =“属性2”> 文本内容

注意：（1）标签可以拥有多个属性，必须写在开始标签中，位于标签名之后

     （2）属性之间部分先后顺序，之间都用空格隔开

   （3）任何标签的属性都有默认值，省略改属性则取默认值。

11.图像标签img

    

   标记属性

  

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时的显示内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

 

12.链接标签

   文本或图像

      Target打开方式 _blank新窗口打开，_self自己窗口打开

13.锚点定位

   创建锚点链接分为两步：

（1）  使用“a href=”#id名”链接文本/a”创建链接成本

（2）  使用相应的id名标注跳转目标的位置。

14.base标签

   一般情况下

15．特殊字符标签

  

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&

 

16.注释标签

   

17．路径

   相对路径

（1）图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可。如

（2）图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开,如

（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加入”../”, 如果是上两级，则需要使用“../../”,以此类推，如

 绝对路径

 “D:\web\img\logo.gif”(一般使用较少)，或完整的网络地址，例如

“http://www.itcast.cn/images/logo.gif”

 

18.列表标签

   （1）无序列表ul（重点）

   无序列表的各个列表之间没有顺序级别之分，是并列的

  

      

• 列表项1
• 列表项1
• 列表项1

        ……

  

 注意：

   

中只能嵌套

,直接在

标签中输入其他标签或者文字是不被允许的，

之间相当于一个容器，可以容纳所有元素。

(2)有序列表ol（了解）

      

1. 列表项1
2. 列表项1
3. 列表项1

        ……

 

 

(3)自定义列表dl（理解）

 定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项没有任何项目符号。

   

名词1

   

名词1解释1

   

名词1解释2

    ……

   

名词2

   

名词2解释1

   

名词2解释2

    ……

 DAY2

1. 表格table（会使用）

(1)

     

         

文字内容

       注意：中只能嵌套; 标签，他就像一个容器，可以容纳所有元素。

(2)表格属性

属性名	含义	常用属性值
border	设置表格的边框（默认border=”0”无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值(默认2)
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值(默认1)
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left, center, right

 

（3）表格结构

:用于定义表格的头部

:用于定义表格主体。

都要放在

里面

(4)表格标题

我是表格标题

Caption标签必须紧随table标签之后，只能对每个表格定义一个标题，会居中于表格之上。

      (5)合并单元格

     跨行合并：rowspan  跨列合并：colspan 

     跨行合并是从上往下，跨列合并是从左往右。删除的个数=合并的个数-1。

1. 表单标签（掌握）

(1)input控件    （注释快捷键：crtl+/）

单标签

属性	属性值	描述
type	text	单行文本输入框
password	密码输入框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式的提交按钮
file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

 

(2)label标签

label标签为input元素定义标注。

(3)textarea控件(文本域)

文本内容

(4)下拉菜单

       

选项1

       

选项2

       

选项3

        …

注意：中至少包含一对。在option中定义selected=”selected”时，当前项即为默认选中项。

(5)表单域

各种表单控件

1. HTML5新标签与特性

(1)常用新标签

header:定义文档的页眉 头部

nav:定义导航链接的部分

footer:定义文档或节的页脚 底部

article:定义文章

section:定义文档中的节

aside:定义其所处内容之外的内容，侧边

datalist:标签定义选项列表。与input元素配合使用。Datalist里面用id来实现和input的链接。

fieldset:元素可将表单内的相关元素分组，打包，与legend搭配使用。

(2)新增的input type属性值

 

类型****	使用示例****	含义****
email		输入邮箱格式
tel		输入手机号码格式
url		输入url格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		月年
week		星期 年

 

(3)常用新属性

属性	用法	含义
placeholder		占位符 当用户输入的时候，里面的文字消失，删除所有文字，自动返回
autofocus		规定页面加载时，input元素应该自动获得焦点
multiple		多文件上传
autocomplete		规定表单是否应该启用自动完成功能，有2个值，一个on一个off，on代表记录已经输入的值
required		必填项
accesskey		规定激活（使元素获得焦点）元素的快捷键，采用Alt+字母的形式

 

(4)多媒体标签

embed:标签定义嵌入的内容

autio:播放音频  

 autoplay 自动播 controls是否显示默认播放控件  loop 循环播放

video：播放视频

---恢复内容结束---

转载于:https://www.cnblogs.com/-pudding/p/11307450.html