web前端总结-day01

对于基础知识的加强和巩固:
第一单元
1.搭建网页的结构:html5.0
2.对页面的页面元素进行修饰,比如定位等。表现(CSS)
3.和页面的元素进行交互。行为(javascript,jQuery)
4.BootStrap(前段框架)—基于HTML,CSS,JavaScript的,优点简介灵活使开发更快捷。
5.文件夹、文件命名规则:由英文字母、数字、下划线共同组成,数字不能开头,不能使用汉字 作为文件名
6. https://www.runoob.com/菜鸟教程
7. 创建HTML时默认首页可以命名为:index或者default
8.HTML静态文件后缀名:.html或者.htm
9.HTML是HyperText Markup Language的缩写,译为:超文本标记语言
注意:HTML不属于编程语言,而是制作网页的基础语言,主要用于描述超文本中内容的显示方式
10.HTML5版本声明:
作用:用于告知浏览器使用哪个版本的HTML或XHTML规范
位置:必须放在html文档的首行,且放置于标签之前
注意:不属于html标签,就是一条声明语句
11.字符集声明标签:
12.<h1>主页内容</h1>
</body><!--删了不影响 会自动添加 不严谨规范 但是title不可以省略 -->
13.HTML基本骨架
<html>
<head>
<meta charset=”UTF-8”/>
<title>文档标题</title>
</head>
<body>主体【页面所有可视部分】</body>
</html>
14.HTML标签不区分大小写:即与与并无区别
15.W3C标准包括:HTML、CSS【CSS样式】、JavaScript【脚本】
16.HTML网页中默认字体大小为:12px、14px【px像素】
第二单元:常见的HTML标签及其属性
1.HTML基本语法:<标签名 属性=“属性值”>内容</标签名>
2.属性的概念:用来表示标签的特征
属性值的概念:为属性赋的值被称为属性值
3.样式标签:【都属于行内元素】
倾斜:<i></i>
倾斜强调:<em></em>
加粗:<b></b>
强调加粗:<strong></strong>
下划线:<u></u>
4.HTML特殊符号:
空格: 【英文半角空格】
大于号:>
小于号:<
版权符号:©
双引号:"
注册符号:®
连接符号&:&
5.标题标签:<h1>~<h6>【块级元素】
H1级别最高、字体最大,依次递减,h6级别最低,字体最小
6.段落标签:<p>内容</p>【块级元素】
7.图片标签:<img/>
8.<br/>换行
标签属性:
(1)宽度属性:width=“数值”【不带单位,默认单位是px】
(2)高度属性:height=“数值”【不带单位,默认单位是px】
(3)图片路径属性:src=“图片路径”
(4)鼠标滑过显示提示文字属性:title=“提示文字”
(5)图片非正常显示时显示提示文字:alt=“提示文字”
注意:所有的标签都具有title属性,除了
标签没有title属性
9、水平线标签:



标签属性:
(1)宽度属性:width=“数值”
(2)颜色属性:color=“颜色名称/十六进制颜色/rgb()颜色”
(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【默认情况】
<b>hello </b>
<strong>world </strong>
<i>斜体字 </i>
<em>强调文本 </em>
<small>小号文本 </small>
<big>大写 不推荐使用 </big>
<sub>下标文本 </sub>
<sup>上标文本 </sup>
h <sub>2 </sub>o 水
m <sup>2 </sup> m的平方
<bdo dir="rtl">hello 从右到左输出 </bdo>
2、无序列表标签: <ul><li>列表项 </li></ul>
标签属性:type=“circle(空心圆)/square(实心方块)/disc(实心圆)【默认值】”
<ul type=“circle”>
<li>列表项 </li>
<li>列表项 </li>
<li>列表项 </li>
</ul>

3、有序列表标签:<ol><li>列表项</li></ol>
标签属性:type=“A(大写字母)/a(小写字母)/i(小写罗马数字)/I(大写罗马数字)/1(阿拉伯数字)【默认值】”
reversed=“reversed”:设置有序列表的倒叙显示(项目符号倒叙)
4、自定义列表标签:<dl>、<dt>、<dd>
<dl>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
</dl>
5、超链接标签:<a>内容</a>
标签属性:
(1)路径属性:href=“跳转链接的路径”
(2)打开方式属性:target=“_self/_blank/_top/_parent”
_self:当前窗口(原窗口)
_blank:新窗口打开
_top:主框架打开、_parent:父级框架打开
注意:1)超链接是一对一的关系(一次只能连接一个文件)
2)不仅仅可连接到网页,还可以连接到图片
3)超链接可以为用户提供链接下载文件
以下内容【可提前做笔记也可以明天用到后再做笔记,绿色的是今天没具体讲的明天可以用到具体讲】
2)超链接标签
<a href=“链接到的目标地址”>内容:文本或者图片</a>
我们可以通过绝对路径和相对路径来回跳转
绝对路径:
相对路径:
<meta http-equiv="refresh" content="7;url=http://www.sina.com.cn" />
描述:行级标签 超链接标签 <a href="" target="_self/_blank"></a>

<ahref=“链接到的目标地址”>内容:文本或者图片 有些网站防盗链 所以不让跳转</a>
<a href=“http://www.sina.com.cn” target="_blank">新浪网</a>
<ahref=“yolanda1.html”>相对路径</a>
<a href=“yolanda\yolanda.html” target="_blank">绝对路径</a>

3)图像标签
<img src="图像资源路径" alt="提示文字"/>

<img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
当图片不存在的时候 会提示alt后面的文字 提示缺少那张图片 title悬停文字
图片跳转 把图片嵌套在超链接里面
<a href="http://www.sina.com.cn" target="_blank">
<img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
</a>
菜鸟:图像标签下的map
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
rect:矩形 左上0,0 右下82,126
circle圆形 圆心:90,59 半径3
4)span强调凸显标签

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值