WEB前端学习第一天

介绍:
1.搭建网页的结构:html5.0
2.对页面的页面元素进行修饰,比如定位等。表现(CSS)
3.和页面的元素进行交互。行为(javascript,jQuery)
4.BootStrap(前段框架)—响应式布局
1、 文件夹、文件命名规则:由英文字母、数字、下划线共同组成,数字不能开头,不能使用汉字作为文件名
我们书写标签的时候尽量以严格的方式来书写
1)有结束标签的必须加结束标签
2)标签名尽量用小写
3)属性值必须加单引号或双引号
4)实现标签的正确嵌套
2、 https://www.runoob.com/菜鸟教程
3、HTML默认首页可以命名为:index或者default
4、HTML静态文件后缀名:.html或者.htm
5、HTML(HyperText Markup Language):超文本标记语言
注意:HTML不属于编程语言,而是制作网页的基础语言,主要用于描述超文本中内容的显示方式
6、HTML5版本声明:
作用:用于告知浏览器使用哪个版本的HTML或XHTML规范
位置:必须放在html文档的首行,且放置于标签之前
注意:不属于html标签,就是一条声明语句
7、字符集声明标签:`

`
该标签放置于标签内

     
    

 【正常都是用UTF-8,国际编码】

    

注意:简体中文编码:
8.


主页内容

10、HTML基本骨架



    
    文档标题

主体【页面所有可视部分】

注意:html标签是head和body的父级元素,head和body标签是html标签的子元素
11、标签可以嵌套,但不允许交叉

【标签嵌套】对
</head>【标签交叉】错

12、HTML标签不区分大小写:即并无区别
13、HTML注释一段内容时使用"结束(Ctrl+?)
14、W3C标准包括:HTML、CSS【CSS样式】、JavaScript【脚本】
15、HTML网页中默认字体大小为:12px、14px【px像素】

第二单元:常见的HTML标签及其属性
1、HTML基本语法:<标签名 属性=“属性值”>内容
2、属性的概念:用来表示标签的特征
属性值的概念:为属性赋的值被称为属性值
3、HTML标签分类:单标签、双标签
(1)单标签:


(2)双标签:


4、样式标签:【都属于行内元素】
倾斜:
倾斜强调:
加粗:
强调加粗:
下划线:
5、HTML特殊符号:
空格: 【英文半角空格】
大于号:>
小于号:<
版权符号:©
双引号:"
注册符号:®
连接符号&:&
6、标题标签:

~

【块级元素】
H1级别最高、字体最大,依次递减,h6级别最低,字体最小
7、段落标签:

内容

【块级元素】
8、图片标签:
标签属性:
(1)宽度属性:width=“数值”【不带单位,默认单位是px】
(2)高度属性:height=“数值”【不带单位,默认单位是px】
(3)图片路径属性:src=“图片路径”
(4)鼠标滑过显示提示文字属性:title=“提示文字”
(5)图片非正常显示时显示提示文字:alt=“提示文字”
注意:所有的标签都具有title属性,除了
标签没有title属性
9、水平线标签:

标签属性:
(1)宽度属性:width=“数值”
(2)颜色属性:color=“颜色名称/十六进制颜色/rgb()颜色”
1)颜色名称:red(红色)、green(绿色)、blue(蓝色)
2)十六进制颜色:

#ff0000(或#f00)(红色)、#00ff00(#0f0)(绿色)
#0000ff(#00f)(蓝色)、#000000(#000)(黑色)、#ffffff(#fff)(白色)

3)rgb()颜色:值得范围是(0-255)
rgb(255,0,0)(红色)、rgb(0,255,0)(绿色)、rgb(0,0,255)(蓝色)
rgb(255,255,255)(白色)、rgb(0,0,0)(黑色)

(3)水平线粗细:size=“数值”
(4)水平对其方式:align=“left/center/right”
10、路径:相对路径、绝对路径
(1)相对路径:自己相对于目标文件的路径
Web/html/index.html
…/index.html【添加…/用于路径不在同一目录下,返回上一级】
(2)绝对路径:完整的描述文件路径,精确到盘符或服务器
例如:http://www.baidu.com【精确到服务器】
C://Web/imgs/01.jpg【精确到盘符】

第三单元:元素分类、列表标签、超链接标签
1、HTML元素分类:行内元素、块级元素、行内块级元素【可变元素】
(1)行内元素(display:inline):行内元素在同一行显示,只能包含文本或其他的行内元素
注意:默认情况下行内元素不具有宽高属性,也不具有:margin-top和margin-bottom【上下外间距】
举例:a、i、span、img、time、em、strong、label、b、textarea、input、select(img和input可以设置宽高)
(2)块级元素(display:block):块级元素独占一行,可以包含行内元素或其他块级元素【注意:块级元素具有宽高属性】
举例:div、p、hr、ul、li、ol、dl、dt、dd、table、form、h1-h6
(3)行内块级元素(display:inline-block):既有宽高属性,同时还有同行特性【能设置宽度,并且在同一行显示】
举例:img、input【默认情况】

hello
 world
 斜体字
 强调文本
 小号文本
 大写 不推荐使用
 下标文本
 上标文本
 h2o    水
 m2     m的平方
 hello 从右到左输出

2、无序列表标签:

  • 列表项

标签属性:type=“circle(空心圆)/square(实心方块)/disc(实心圆)【默认值】”

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

练习:
1.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
2.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
3.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
3、有序列表标签:

  1. 列表项

标签属性:type=“A(大写字母)/a(小写字母)/i(小写罗马数字)/I(大写罗马数字)/1(阿拉伯数字)【默认值】”
          `reversed=“reversed”:`

设置有序列表的倒叙显示(项目符号倒叙)
4、自定义列表标签:

自定义项
自定义描述项
自定义项
自定义描述项

5、超链接标签:内容
标签属性:
(1)路径属性:href=“跳转链接的路径”
(2)打开方式属性:target=“_self/_blank/_top/_parent”

_self:当前窗口(原窗口)
_blank:新窗口打开
_top:主框架打开、_parent:父级框架打开

注意:1)超链接是一对一的关系(一次只能连接一个文件)
2)不仅仅可连接到网页,还可以连接到图片
3)超链接可以为用户提供链接下载文件
以下内容【可提前做笔记也可以明天用到后再做笔记,绿色的是今天没具体讲的明天可以用到具体讲】
2)超链接标签

内容:文本或者图片

我们可以通过绝对路径和相对路径来回跳转
绝对路径:
相对路径:


描述:行级标签 超链接标签

 -->

 内容:文本或者图片  有些网站防盗链  所以不让跳转
 新浪网
 相对路径
 绝对路径

		绝对路径lalala
		index.html

3)图像标签

提示文字

 程序员专用

 

图片跳转 把图片嵌套在超链接里面


 	程序员专用
 

菜鸟:图像标签下的map

Planets


  Sun
  Mercury
  Venus

rect:矩形 左上0,0 右下82,126
circle圆形 圆心:90,59 半径3

4)span强调凸显标签
今天打折,只要7折起 :凸显7折

展现不了凸显

今天打折,只要7折

5)
换行标签:换行间距不大

标签间距大

你可能感兴趣的:(WEB)