2018-10-29day1-HTML标签基础

一、web标准

  • a.结构标准(HTML):决定网页的内容;
  • b.表现标准(css):决定网页内容的布局和样式;
  • c.行为标准(JavaScript):决定网页中的行为和动作(变化);

二、HTML

  • 1、超为本标记语言
    标记语言:通过不同的标记让内容以指定的格式展示出来,特点:标记出错不会影响其他的标记解释。
  • 2、超文本:除了文文本以外还可以标记图、超链接、音频、视频、flash、输入框按钮等。

三、HTML文件

就是后缀是.HTML的文件,可以直接用浏览器打开(展示效果),

四、HTML结构

  • 1、一个HTML标签包含一个HTML标签和两个平行的head标签和body标签(如下)



  • 2、head中的内容除了title和icon以外,其他的都不可见

  • 3、body里的内容一般显示在网页上,一般都是可见的

五、标签

  • 1、用来说明HTML版本的
    注意:中的HTML代表的就是HTML5的版本,其他版本的对应去写
    注意:HTML标记对大小写不敏感(可以全部大写、也可以全部小写、也可以大小写混合使用)
  • 2、mate标签:
  • 3、title标签
  • 设置网页标题
  • 百度一下,你就知道

六、标签的语法

  • 1、单标签和双标签(双标签页也称常规标签)
    注意:标签就是标记,属性位置没有要求(没有先后顺序)
  • 2、双标签:<标签名 属性名1:属性值2 属性名2:属性值2....>内容
  • 3、单标签:<标签名 属性名1:属性值..../>(有斜杠)
    <标签名 属性名1:属性值....>(无斜杠)
    注意:HTML重点额标签不能自己随便命名,标签名和<以及标签名和/之间都不能有空白>
  • 4、属性:属性可有可无,属性和属性值之间用冒号连接,多个属性之间用空格隔开
  • 5、标签内容:在开始标签和结束标签之间,标签的内容可以是任意的(也可以是文本也可以是其他标签)

七、head中的标签(title、base、mate、link、style、script)

  • 1、mate:设置网页的元数据(单标签)
  • 2、mate属性:name=“属性名” content=“内容”
  • 3、title:设置标题的
  • 4、mate:定义元数据()

八、body中的标签

  • body中的的标签主要是用来在网页中显示信息的


    
        
        文本标签
    
    
        
        

标题1

标题2

标题3

标题4

标题5
标题6

    我飞机交付的甲方扩大开放活动空间发快递

    放大立即分解了发热了看见了金风科技


床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。


床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。

九、列表

  • 列表标签(有序列表、无序列表、自定义列表)
1、有序列表(ol和li)

    标签:代表一个列表
  1. 标签:列表元素

2、无序列表(ul和li)

    标签:代表一个列表
  • 标签:列表元素

3、自定义列表(dl和dt、dd)

标签:代表一个列表(分组)
标签:列表分组名
标签:列表分组内容,多个分组就用多个dd



   
       
       列表标签
   
   
       
       

有序列表

  1. 第一
  2. 第二
  3. 第三
  4. 第四
  5. 第五

无需列表

  • 第一
  • 第二
  • 第三
  • 第四
  • 第五

自定义列表

教学部
教师1
教师2
教师3
财务部
财务1
财务2
财务3
财务4

十、图片标签

1、

src属性:本地图片,地址可以是本地绝对路径、绝对路径,一般讲图片放在image文件夹中
title:设置图片标题(鼠标停留在图片上显示的内容)
alt:设置图片加载失败的提示信息

2、超链接标签

格式:内容
内容:可以是文本、图片
href:跳转的目标地址(网络地址、本地的HTML地址、什么也不写就是刷新、还在当前网页跳转到指定的位置)
targets属性:跳转方式
target值:self(默认值)原网页被覆盖、_blank(在新的页面中打开网页)原网页还在

 
 
    
        
        图片和超链接
    
    
        
        没有图片
        
        
百度一下
没有图片
刷新

十一、表格标签

table:表格的开始
th:表头
tr:行
td:单元格
注意:写行式可以使用快捷键 td*3 + Tab键
table的属性
border:规定表格单元是否拥有边框。
bordercolor:设置边框颜色(可以是英文单词、rgb十六进制数(#ffff))
cellspacing:表示单元格和单元格之间的间隙(有默认值)
cellpadding:单元格边框和内容之间的距离
width:宽度作用于table(会根据内容的大小按比例去分配每一行的宽度)
height:高度作用于table(会根据内容的大小按比例去分配每一行的高度)
注意:可以单独设置每一行高度和每一列的宽度

2、背景颜色

bgcolor:背景颜色
a. 作为table的属性,就是设置整个table的背景颜色
b. 作为tr的属性,就是只对某一行起作用
c. 作为td的属性就是只对某一个单元格f起作用

3、对齐方式

align:值有center、lift、right
作用于table则是让其在父标签中居中
作用于tr时,是把整行的内容在单元格中居中
作用于td让指定的单元格的内容居中、左或右对齐

 
 
    
        
        表格标签
    
    
        
Data1eef Data1f Data1
Data2fd Data2 Data2
Data3 Data3fsdf Data3

Data1eef Data1f Data1
Data2fd Data2 Data2
Data3 Data3fsdf Data3

Data1eef Data1f Data1
Data2fd Data2 Data2
Data3 Data3fsdf Data3

十二、合并列和行

  • 1、确定列表的最大行数
  • 2、确定每一行的有多少个单元格
  • 3、确定每个单元格是否有合并现象
  • rowspan: 行合并
  • colspan: 列合并
 
 
    
        
        复杂的表格
    
    
        
111 222
333 444
555
666 777 888

你可能感兴趣的:(2018-10-29day1-HTML标签基础)