HTML/CSS 第一章

前端开发人员的准备工作

  1. 打字速度
    • 练习英文打字 100字/min (正确指法)
    • 安装金山打字通
    • 安装有道词典
  2. 文件后缀名的设置 (查看 -> 文件扩展名)
  3. 将常用的工具锁定到任务栏

WIN中的一些快捷键

  • ctrl+c 复制
  • ctrl+v 粘贴
  • ctrl+x 剪切
  • ctrl+s 保存
  • ctrl+a 全选
  • ctrl+z 撤销上一个操作
  • ctrl+y 还原上一个操作
  • alt+f4 关闭当前程序
  • win+E 打开资源管理器
  • alt+tab 切换程序 (注意整个过程中 alt是长按不放的)
  • win+D 切换到桌面 (鼠标点击右下角)
  • win+R 快速运行,打开软件,cmd命令行等
calc 运行计算器
mspaint 运行画图
cmd 运行命令行
notepad 运行记事本
  • win+L 锁屏
  • win+方向键 最大化、还原/最小化窗口
  • ctrl+alt+del 会显示以下选项:锁定该计算机、切换用户、注销、更改密码、启动任务管理器
  • f2 可以重新命名文件

今天学习目标

  1. 认知网页和浏览器,理解web标准
  2. 熟悉编辑器(sublimeText)
  3. 其他html标签介绍
  4. img标签(插入图片)
  5. a标签(超链接及插入锚点)
  6. 列表

认知网页

问:前端人员的工作跟什么打交道 答:网页 网页的构成:由文字,图片,超链接,多媒体(音频,视频,Flash)等组成!

思考:网页是如何形成的呢?

浏览器的分类和内核

五大常见浏览器介绍:(内核做个了解)

  1. IE (edge)(Trident)
  2. 火狐(firefox)(Gecko)
  3. 谷歌(chrome)(blink)
  4. 苹果(safari)(webkit)
  5. 欧朋(Opera)(blink 早期:presto )浏览器的内核相当于汽车的发动机,是最核心的在,它负责将代码转换成用户眼中的界面

查看统计网站: http://tongji.baidu.com/data/browser

  • 问:浏览器的不同,那么自然它的工作原理和解析方法也会不同,显示自然会有差别,怎么解决?

web标准

  • 网页的结构(后缀名字为.html的文件)
  • 网页的样式(后缀名字为.css的文件)
  • 网页的行为(后缀名字为.js的文件) ### 各司其职:
  • 网页的结构:负责网页的内容整理和分类
  • 网页的样式:负责设置网页的板式,颜色,文字大小
  • 网页的行为:负责网页的动态交互

认知HTML

概念:HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

说白了HTML就是用尖括号包裹起来的英文单词,浏览器对这个尖括号包裹起来的英文单词有特殊的解释

如:<strong>加粗</strong>  <h1>大标题</h1>  等等

HTML骨架

HTML有固定的基本格式,就跟我们书信有基本的格式是一样的

<html>
<head>
<title>页面的标题</title>
</head>
<body>
这里写内容
</body>
</html>

HTML的其他介绍

标签的关系

嵌套关系

<html><head></head></html>

并列关系

<head></head><body></body>

HTML的标签分类

双标签:如<strong>标签的内容</strong>  语法:<开始标签> 标签内容 </结束标签>
单标签:<br/>单标签都是功能性的标签,例如换行等功能 里面不需要添加内容 语法:<标签名 />

开发工具

开发工具仅仅是一个工具,不过过度去依赖,后期到了就业班老师会更换不同的开发工具。

sublime的使用

  1. 创建临时文件:ctrl+n 保存的时候一定记得添加文件的后缀名.html
  2. 写完标签之后 按 tab键
  3. 自动生成完整版骨架的快捷方式:! => tab键 或者 html:5 => tab键
  4. 显示侧边栏:查看 - 侧边栏 - 显示隐藏侧边栏 将源代码文件夹拖拽进来即可
  5. 预览页面
    • 右键复制文件路径 打开浏览器 在地址栏里面复制进去敲回车即可
    • 右键直接在浏览器中打开 骨架扩展:
  6. <!DOCTYPE>:文档DTD 作用是告诉浏览器我们当前用的是什么html的版本
  7. <meta charset="UTF-8">:设定字符集 (后面精讲)

认知标签

1. 标题标签 <hn>标题内容</hn>  设置一个标题 n的取值范围是1-6  1的权重最高,6最小
2. 段落标签 <p>段落内容</p>
3. 水平线标签 <hr /> 单标签  作用是呈现一个水平线
4. 换行标签 <br />  单标签 作用是换行

字体格式化标签
5. 加粗字体 <strong>字体加粗</strong> <b>字体加粗</b>
6. 倾斜字体 <em>字体倾斜</em> <i>字体倾斜</i>
7. 字体贯穿线  <del>字体贯穿</del> <s>字体贯穿</s>
8. 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>

标签语义化

一个需求可以用不同的标签来完成,那么这之间有什么区别呢?一个是标签语义强,起强调作用。一个是没有语义,没有强调作用 语义好的网页更受SEO的喜欢,在搜索引擎里面的排名会更靠前

SEO优化 ===> 在输入关键字的时候,搜索引擎会罗列很多很多的网页出来,而用户基本习惯都是点前面的网页,不会去点后面的网页,所以如果网页在搜索引擎中的排名更加靠前,那么自然而然会带来更多的用户点击访问。

如何优化(了解):

1、花钱买关键字  见效快,花钱多
2、让页面更加规范,语义更加明确(在合适的地方使用合适的标签)
3、制作静态页面
4、发外链

标签属性

在使用标签的时候,一个独立的标签比较单一不能完成一些需求 这个时候就可以借助于标签的属性来完成

语法: <标签 属性名1=“属性值1” 属性值2=“属性值2”>  如:<hr color="red"/>

在这里我们只需要了解语法即可 后面还会学习不同的标签不同的属性

图片标签

	<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />

图片属性

  1. src="图片地址"
  2. alt="图片的替换文本"
  3. title="图片标题"
  4. width="400" height="400"(样式属性后期可以通过css去完成)

路径(地址) 难点和重点

地址分类

绝对地址:从盘符或者http://出发去找目标文件的过程就是绝对路径

<img src="http://www.baidu.com/logo.png">
<img src="c:">

相对地址:从当前文件出发去找目标文件的过程就称之为相对路径

  • 如果当前文件和目标文件在同一个文件夹的话,路径直接写目标文件的名称即可
  • 如果当前文件和目标文件不在同一个文件夹,那么需要先找到目标文件对应的文件夹
上一级目录 ../
下一级目录 文件夹名/

链接标签

	<a href="链接的地址" target="链接的打开方式" /> 只要被a标签包裹就可以跳转

跳转的分类

1. 站外跳转:http://www.baidu.com
2. 站内跳转:写本地文件路径
3. 锚点跳转(页面内部跳转):
在需要跳转的标签上添加 id="自定义id名"   如:<p id="myid"></p>
让a标签的href属性等于之前自己自定义的id名 如:<a href="#自定义的id名字" />

target的取值

  1. _self 默认值 覆盖当前页面打开
  2. _blank 新窗口打开

列表

列表的分类

  1. 无序列表
<img src="media/ul.png" height="747" width="510" alt="">

	<ul>
		<li>列表一</li>
		<li>列表一</li>
		<li>列表一</li>
		<li>列表一</li>
	</ul>
特点:列表之间没有顺序 在实际工作中用的较多
  1. 有序列表
<img src="media/gold.png" height="380" width="510" alt="">

<ol>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ol>
特点:列表之间有顺序 在实际工作中用的较少
  1. 自定义列表
<img src="media/mix.png" height="417" width="1328" alt="">

<dl>
<dt>列表标题</dt>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
</dl>
特点:可以针对一个列表标题充分解释 特定情况下使用

列表的注意

	1. <ul></ul>或者<ol></ol>中只能嵌套<li></li>,直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
	2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
	3. <dl></dl>中只能嵌套<dt></dt>和<dd></dd>,直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。
	4. <dd></dd>之间相当于一个容器,可以容纳所有元素。<dt></dt>一样

细节补充

注释标签

浏览器不解析的标签 作用是用来提示开发人员或者便于开发人员理解和阅读 sublime快捷生成注释的方式 选中需要注释的文本 ctrl+/ 注释的重要性:

特殊字符(字符实体)

在一些情况下,我们需要在页面上显示一些特殊的标识的时候 我们就需要用到字符实体

原文发布于微信公众号 - web前端基地(webjidi)

原文发表时间:2019-07-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券