(前端学习)寒假第一周周报

了解了一下前端学习的路线,我有点震惊,学习的东西真的很多很多,如下:
原来css也只是准备工作,不禁感慨任重而道远(前端学习)寒假第一周周报_第1张图片

附带一张我HTML和css的视频学习进度(前端学习)寒假第一周周报_第2张图片

这周学习完了HTML和css中的属性和一部分选择器

HTML—给网页的内容添加语义,而不是改变样式

1.首先了解了五大浏览器

浏览器
IE
Firefox 火狐
chrome 谷歌
opera 欧朋
safari mac自带

ps:我的认知水平仅限于知道它们的名字(惭愧)
2. 字符集:字符集合,将字符排序并标上序号
字符编码:规定标上序号的字符储存的方式

字符编码 储存内容
ASCII 只储存了英文字母及字符
GB2312 储存了简体中文字符
GBK 储存了简体和繁体中文字符
UNICODE 分为UCS和UTF,其中UTF包括UTF-8,UTF-16,UTF-32

3.网页编写代码的格式:


"en">
 
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">    Document

    

4.基础标签

标签 作用
H系列标签 h1~h6 ,给文本定义标题
p标签 定义段落
Hr标签 显示分割线
img标签 插入图片
a标签 超链接,控制页面之间的跳转
base标签 统一超链接如何打开
br标签 定义换行
title标签 定义网站的标题
注释 < !- -内容- ->或者/**/
锚点 例如点击头部跳转到中部或者尾部
假链接 点击之后不会跳转

练习:
5.列表

  • 有序列表(ordered list)
  1. 需要显示的内容
  • 无序列表(unordered list)(前面会有小圆点)
    例如新闻列表
    (前端学习)寒假第一周周报_第3张图片
  • 需要显示的内容

eg:
(前端学习)寒假第一周周报_第4张图片

效果图(前端学习)寒假第一周周报_第5张图片

  • 定义列表

例如京东网站尾部的信息
(前端学习)寒假第一周周报_第6张图片
eg:(前端学习)寒假第一周周报_第7张图片
(前端学习)寒假第一周周报_第8张图片

//定义列表中的标题
//定义标题下的内容

6.表格标签

  • 格式:
//行
		//小格
	
显示的内容
  • 细线表格
"black",cellspacing="1px">
"white">
内容
  • 单元格合并
    1.竖直方向
"2">

2.水平方向

"2">

(前端学习)寒假第一周周报_第9张图片
效果
(前端学习)寒假第一周周报_第10张图片

6.表单标签

  • 格式:
<表单元素>
  • 常见的表单标签
    1.input标签
    2.Label标签
    3.datalist标签
    4.select标签
    5.textarea标签
    6.video标签
    7.audio标签
    8.marquee标签
    9.详情概要标签
    10.字符实体
    字符实体:在HTML中对空格,回车,Tab不敏感,会把多个当成一个来处理, =一个空格,<=<,>=>,©=©(版权符号)
    下面用到1,2,3,4,5标签常用的属性和值做了一个简单的注册界面,代码如下
    (前端学习)寒假第一周周报_第11张图片
    (前端学习)寒假第一周周报_第12张图片
    效果图:
    (前端学习)寒假第一周周报_第13张图片
    (前端学习)寒假第一周周报_第14张图片
    video标签的使用(插入视频)

(前端学习)寒假第一周周报_第15张图片
(国超太帅了呜呜)
(前端学习)寒假第一周周报_第16张图片
8,9标签的演示:
8标签默认状况下是折叠,marquee标签的话,类似于跑马灯
(前端学习)寒假第一周周报_第17张图片
效果如下:
(前端学习)寒假第一周周报_第18张图片

CSS–修改网页的样式
笔记分享(╹▽╹)(其实我是懒,再写下去的话我人就没了,嘘)
(前端学习)寒假第一周周报_第19张图片
(前端学习)寒假第一周周报_第20张图片
(前端学习)寒假第一周周报_第21张图片
(前端学习)寒假第一周周报_第22张图片

(前端学习)寒假第一周周报_第23张图片
(前端学习)寒假第一周周报_第24张图片

(前端学习)寒假第一周周报_第25张图片
写周报太难了呜呜┭┮﹏┭┮头大

你可能感兴趣的:(前端,html,css)