2018-09-17HTML5基础(day1)

一、认识HTML5

1.web标准

  • web前端的内容:HTML5、CSS、JavaScript
  • web标准(万维网---WWW指定的)中规定HTML是结构标准,CSS是表现标准,JS是行为标准
  • a.HTML结构标准中规定了网页上能够显示的内容,比如显示文字、图片、音频、视频、Flash、按钮、输入框等……
  • b.CSS表现标准规定网页的内容和布局和样式,比如内容该显示在什么位置,- 内容是什么颜色、多大、多宽等……
  • c.JS行为标准规定网页的内容在某种情况下发生什么样的改变(动态变化)

2.HTML

  • a.什么是HTML
    HTML又叫超文本标记语言(是标记语言,不是编程语言)

  • b.HTML版本
    狭义的h5:指html第5个大版本
    广义的h5:指的是html5 + CSS3 + javascript

  • c.html文件结构(由不同的标签组成)


    
        内容是不可见的
    
    
        内容是可见的
    

3.HTML中的标签

  • 网页中的内容就是通过html中的不同的标签(标记)来确定
标签语法:
  • a.常规标签(双标签):<标签名 属性1 = 属性值1 属性2 = 属性值2……>标签内容
  • b.单标签:<标签名 属性1 = 属性值1 属性2 = 属性值2……> 或者 <标签名 属性1 = 属性值1 属性2 = 属性值2……/>
说明:
  • <>,:固定写法,html中所有的标签都是写在<>中的
  • 标签名:不是随意命名的,而是一些固定的值,例如:

    - p标签、a标签、b标签、h1标签、input标签、img标签等 标签名前面不能有空隙
  • 属性:属性放在开始标签中,属性名和值之间用=连接,多个属性之间用空格隔开。属性可以是自定义的属性也可以是标签自带的属性
  • 标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字也可以是其他标签),
    我是python
    ,

  • :结束标签,单标签没有一个单独的结束标签

4.基本语法

  • HTML语法中大小写不敏感:html和HTML,HtMl是一样的
  • 文件名命名要求:是由字母和数字组成,但是数字不开头,字母一般都小写。网站首页的html文件命名index

5.基本格式

  • DOCTYPE:用来说明当前的html文件中使用的html版本
  • html:代表HTML5
  • html标签:代表整个网页
  • 1.head标签:head标签中的内容不可见,一般做一些网页设置性的操作
  • 2.head标签中的内容:head标签中的子标签是固定的:
    meta标签:单标签,charset属性用来设置网页的编码方式
    title标签:设置网页标题
    link标签
    style标签
    script标签
    base标签
  • body标签中的内容是在网页中可见的部分
  • html学习目标就是掌握body中的常用标签




    
    
        
        魏世强
    
    
    
            今天学习HTML
    

二、文本标签

1.标题标签:h

  • h1-h6

2.段落标签:p

  • 网页的内容中一个段落文字对应一个p标签
  • p标签的内容结束后会自带换行
  • 注意:html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效),但是可以通过一些特殊的符号,来产生特定的效果
  • 空格符 & nbsp;
  • 强制换行:
  • &divied; ➗

3.文字效果

  • a.加粗:b标签,strong标签;
    b标签:单纯的在样式上进行加粗;
    strong标签:除了将文字加粗显示外还有强调的意义
  • b.倾斜:i标签,
    em标签 em标签有强调的作业
  • c.水平线:
    hr 单标签:

5.列表标签

  • ul:无序列表
  • ol:有序列表
  • dl:自定义列表
  • dt:对列表进行分组
  • dd:列举分组下的内容


    
        
        711
    
    
        
        

我是标签1

我是标签2

我是标签3

我是标签4

我是标签5
我是标签6

        在使用苹果Safari浏览器的开发调式是没有打开的,而熟悉Safari使用者,是很难找到的, 可以Safari开发者模式进行查看网页的源代码及进行调式作用。
而对开发人员和测试人员会经常使用到调式模式, 来进行定位元素,那么如何打开开发调式模式。2÷10


项目通过OpenCV 库来实现人脸面部特征交换,将希拉里人脸的眼睛、鼻子和嘴巴通过程序自动川也能应用所学的知识。
  • 语文
  • 语文是Chinese

  • 数学
  • 英语
  1. 成都
  2. 上海
  3. 深圳
  4. 重庆
A
and
B
c

三、图片标签和超链接

1.图片标签:img标签

  • 单标签
  • src属性:图片地址(可以是本地图片地址,也可以是远程服务器上的图片地址)
  • title属性:设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
  • alt属性:用来设置图片加载失败的时候出现的提升信息

2.超链接标签:a标签

  • 想要点击跳转的地方都可以使用超链接语法
  • 注意:a标签的内容部分是可见的,是可以被点击
href属性:跳转目标对应的地址
  • a.其他的网页地址 ----- 跳转
  • b.写本地的一个html路径 ----- 跳转
  • c.空 ----- 刷新当前网页
  • d.选择器 ----- 让网页跳转到指定的位置
target属性:设置跳转方式
  • _self(默认值):在当前页中刷新出新的内容
  • _blank:创建一个新的页面,在新的页面中刷新出href指定的内容
  • 注意:刷新当前页面和当前网页中跳转到指定位置的时候,只能使用默认的_self


    
        
        图片和超链接
    
    
        
        加载失败
        
        
        
        百度一下
        千锋
        文本标签
        刷新
    

四、表格标签

1.表格标签:table标签、tr标签、td标签、th标签

  • table标签:表格整体(一个table标签代表一个表格)
  • tr标签:行(一个tr标签代表表格中的一行)
  • td标签:单元格(一个td代表一个单元格)
  • th标签:表头()

2.属性

  • a.border属性:设置表格的边框的宽度(只能作为table)
  • b.bordercolor:设置边框的颜色(只能作用于table)
  • c.background:设置背景图片
  • d.bgcolor:设置背景颜色(可以作用于table\tr\td)
  • e.cellspacing:设置单元格与单元格之间的间距(默认是1)
  • f.cellpadding:设置内容和单元格之间的间距
  • g.width:宽度一般作用于某一个单元格,影响的是这个单元格对应的那一列
  • h.height:高度一般作用于行,影响的是一行的高度
  • i.align:设置对齐方式(可以作用于table\tr\td)
  • 作用于table,让整个表格在浏览器中居中
  • 作用于tr\td,让内容在单元格中居中


    
        
        表格标签
    
    
        
        
成绩表
姓名 成绩 是否留级
张三 70
李四 80

五、不规则表格

  • colspan:列合并
  • rowspan:行合并

过程:先确定表格中最多多少行,然后再数每一行有多少个单元格再确定每个单元格是否有合并现象,如果单元格有行合并就设置rowspan属性,如果有列的合并就设置colspan的值



    
        
        
    
    
        
        

你可能感兴趣的:(2018-09-17HTML5基础(day1))