Day1-课堂笔记-HTML

1.web基础

1)web标准:(万维网-w3c)

结构标准:HTML -决定网页内容
表现标准:css ---决定网页布局和显示方式
行为标准:JavaScript(js)---决定网页动态的效果

2)认识HTML

HTML是超文本标记语言,(可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容)
HTML不是编程语言,不会编译执行,语法错误不会报错也不会导致程序不能继续执行

3)HTML版本

广义的HS:指HTML5+css3+js
狭义的H5:HTML5

4)HTML编程

HTML标记语言对应的文件的后缀,一般都是html
HTML的结构:整个html是通过不同的标记来组成的

5)标签/标记

双标签:<标签名 属性=属性值 属性=属性值>标签内容
单标签:
<标签名 属性=属性值 属性=属性值/>
<标签名 属性=属性值 属性=属性值>
说明:
标签名:HTML标准中固定的(注意:<和标签名之间不能有空白))
属性:属性和标签名之间用空格隔开,以属性=属性值的形式存在,多个属性之间也用空格隔开(属性可以是
HTML标准中的属性,也可以是自定义的属性)
标签内容:是指开始标签和结束标签之间的内容,标签内容可以是任何内容(字符串,及其他任何标签)
---a标签

---p标签
---input标签
补充:HTmL语法中,不区分大小写(HTML\html\HtMl是一样的)

6.网页的结构








-->





    
    
        
        HTML基础
        
        
            
        
    
    
    
        
    

2.文本标签

1)标题标签

标题1

标题2

标题3

标签4

标签5
标签6

2)段落标签(p)

一个p标签对应一个段落
p标签的内容结束后和其他的内容之间默认有一个空行

3)文本符号

 ---空格
其他的看手册

4)超链接(a)

百度一下

5)文字加粗(b/strong)

加粗文字
加粗文字且有强的作用

6)--文字倾斜(em/i)

文字倾斜
文字倾斜且有强调作用

7)水平线(hr)

自带换行功能



    
        
        文本标签
    
    
        
        

标题1

标题2

标题3

标签4

标签5
标签6

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代 性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好 的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代 性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好 的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

空白 空白

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此
时,浏览器将显示这个替代 性的文本而不是图像。为页面上的图像都加上替换文本属性是个好
习惯,这样有助于更好 的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

百度一下

在浏览器无法载入图像时,替换文本属性告诉读者


她们失去的信息。此时,
浏览器将显示这个替代 性的文本而不是图像。为页面上的图像都
加上替换文本属性是个好习惯,这样有助于更好 的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。


在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,
浏览器将显示这个替代 性的文本而不是图像。为页面上的图像都
加上替换文本属性是个好习惯,这样有助于更好 的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。


3.列表

1)有序列表

  1. 语文
  2. 数学
  3. 英语

2)无序列表

  • 成都
  • 重庆
  • 北京

3)自定义列表


城市

成都

重庆

合肥

省份

四川

安徽

4.图片和超链接

1)图片标签

src属性:图片的地址(本地地址、网络地址)
本地地址:相对路径(相对于工程目录)
注意:本地图片需要放到工程目录下的img文件夹下
title属性:图片的标题(鼠标停留在图片上,隔一段时间才显现出来)
alt属性:图片加载失败后显示的提示信息

2)超链接

网页上点击后可以跳转的标签都是超链接
href属性:跳转地址(本地地址,网络地址)
网路地址:跳到对应的网址
本地地址:当前工程的其他HTML的文件路径
空串/#:刷新页面回到网页的顶部
选择器:让网页滚动到任何位置
target属性:
_self(默认的):在当前页面中打开href的地址
_blank:在新的页面中打开href的地址
点击文字跳转



    
        
        
    
    
        
        
图片加载失败

图片加载失败
百度一下
列表
image2

5.表格

1)table:表格

  • tr:行
  • td:列
    一个表格可以有多行,一行可以有多列
  • border:设置表格边框的宽度
  • width:设置表的宽度
  • height:设置表的高度
  • align:center 让表格在网页中居中
  • bgcolor:给表格设置背景颜色
  • cellspacing:控制单元格与单元格之间的空隙
  • cellpadding:控制单元格与内容之间的间距(了解)

2)tr属性:

  • height:设置单独的某一行的高度
  • align:center让一行的内容居中
  • bgcolor:给某一行设置背景颜色

3)td属性:

  • width:设置某一列的宽度
  • align:center让某一个单元格中的内容居中
  • bgcolor:给某一个单元格设置背景颜色
    注意:所有的属性的值都要用双引号括起来


    
        
        表格
    
    
        
        
姓名 成绩 是否留级
小李 30 no

6.复杂的表格

1)合并行

rowspan:行的合并

2)合并列

colspan:列的合并



    
        
        复杂的表格
    
    
        
        

你可能感兴趣的:(Day1-课堂笔记-HTML)