前端--html5
day01
基础学习路线:PC端网页布局(html5+css3+提高+电商网站)
html: 1、能够说出网页的基本组成
2、能够说出什么是HTml
3、能够说出常用的浏览器
4、能够说出Web标准的三大组成部分
网页:什么是网站? :网页集合 网页:网站中一页,html文件,由图片链接、文字、视频等组成
html:超文本标记语言,一种编程语言
超文本:1、可以加入图片、声音、动画、多媒体等内容2、可以从一个文件跳转到另一个文件,与世界主机的文件链接(超级连接文本)
常用浏览器:IE firefox chrome safari opera
内核:读取网页内容,整理讯息,计算网页的显示方式并显示页面
IE:trident IE 360 百度
firefox: Gecko
safari:webkit
chrome: blink blink是webkit的分支
web标准构成:结构 HTml:网页元素进行整理和分类、
表现 css:用于设置网页元素的版本、颜色、大小
行为JS:网页模型的定义和交互的编写
Html标签:1、能够说出标签的书写注意规范:尖括号,双标签 单标签
2、能够写出HTml骨架标签
3、能够写出超链接标签
4、能够写出图片标签并说出ALt和title的区别
5、能够说出相对路径的三种形式
标签关系:包涵、并列
根标签:html 头:head 标题:title 主题:body
开发工具:DW VScode (先保存)
VS基本使用、推荐插件安装:Chinese openinbrowser autorenameTag Csspeak
部分标签:1、<!DOCTYPE>:文档类型声明标签,作用告诉浏览器使用哪种html版本显示网页
2、lang :用来定于当前文档显示的语言 en:英文网站 zh-CN定义语言为中文网站、英文也可以显示
3、charset:字符集:以便计算机能够识别和存储各种文字
<meta charset="UTF-8"/>
常用值:GB2312、GBK、UTF-8
好多标签语义:标签用来干嘛的
1、标题标签<h1>-<h6> 1)加了标题的文字会变得更粗、字号依次变小2)标题独占一行
2、段落标签:<p></p> 1)段落会根据浏览器窗口大小自动换行 2)段落和段落之间保留空隙
3、换行标签:<br /> 1)单标签 2)比段落之间距离小
4、文本格式化标签:对文字设置粗体、斜体、删除线、下划线等
<strong> <b> <em><i> <del><s> <ins><u>
5、<div>分割<span>跨度 没有语义,用来存放内容 1)div用来布局,一行只能放一个<div>大盒子 2)span一行可以放很多个,小盒子
6、图像标签:<img src="图像url">
路径:相对路径引用文件为参考(同级、下一级/、上一级../)、绝对路径
属性:1)alt:替换文本、图像不能显示用文字替换
2)title:鼠标放到图像上,提示的文字
3)src:必须属性
4)width:设置宽度
5)height:设置高度
6)border:给图像设定边框
注意事项:1)图像标签可以有多个属性必须下载标签名的后面
2)属性之间不分先后顺序
3)属性采用键值对的格式
7、超链接标签:<a>:从一个页面连接到另一个页面
<a herf="跳转目标" target="目标弹出的方式”> 文本或图像</a>
属性:1)herf:必须属性用于指定连接目标的url地址
2)target:用于连接页面的打开方式 —_self默认值 _blank在新窗口打开方式
链接分类:1)外部链接<a herf=“http://www.qq.com" target="_blank">腾讯</a>
2)内部链接:网站内部网页链接<a herf="1.html">内部</a>
3)空链接:herf=“#”
4)下载连接:herf连接exe或者压缩包等herf=“1.zip”
5)网页元素链接:文本、图片、音频<a herf="http://www.baidu.com"><img src="img.jpg></a>
6)锚点链接:点击链接可以快速定位到页面中的某个位置
1>在链接文本的herf属性中,设置属性值为#名字的形式 <a herf="#two">第二集</a>
2>找到目标位置标签,里面加一个id属性=刚才的名字,<h3 id="two">第二集介绍</h3>
8、注释标签<!-- -->ctrl+/
特殊字符
1、空格符: 
2、小于号:&it 大于号:>
day02
目标:1)能够书写表格
2)能够写出无序列表
3)能够写出3-4个常用input表单类型
4)能够写出下拉列表表单
5)能够使用表单元素实现注册页面
6) 能够独立查阅W3C文档
内容:1)表格标签
2)列表标签
3)表单标签
4)综合案例
5)查阅文档
部分标签:
表格标签:用于显示、展示数据
基本语法:<table>表格 <tr>一行 <td>单元格
1、表头单元格标签<th>加粗居中显示
2、css设置table表格属性:1)align居中:left、center、right
2)boder:边框 =1
3)cellpadding:字和边框的距离
4)cellspacing:单元格与单元格之间的距离
5)width:像素宽
3、结构标签:1)<thead>:头部区域
2)<tbody>:主体部分有更好的语义
4、合并单元格:1)跨行 rowspan竖着
2)跨列 colspan横着
3)目标单元格 跨行,上面的 跨列,左边的
4)<td colspan="2"></td> 删除多余的单元格
列表标签:用于布局整齐有序
分类:无序列表、有序列表、自定义列表
1、无序列表:<ul><li></li></ul>
1)ul的儿子只能是li
2)li可以作为容器放很多东西
3)没有顺序,等级并列
4)无序列表有自己的样式属性,在实际使用时,用css来设置
2、有序列表<ol><li></li></ol>
3、自定义列表,最底测:用于对术语或名词进行解释和描述
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
表单标签:收集用户信息:表单域、表单控件、提示信息
1、表单域:把用户信息交给服务器
<form>标签用于定义表单域
<form action="url地址” method=“提交方式” name=“表单域名称”></form>
属性:1) action:用于只能接受信息服务器地址
2)method:提交方式
3)name:用于指定表单的名称,以区分容一个页面中的多个表单域
2、表单控件:1)输入:<input type="属性值"/>
text:文本框
password:密码框
radio:单选按钮多选一
checkbox:复选框
submit:提交按钮,把表单域送给后台
reset:可以还原表单元素初始默认状态
button:按钮,不提交数据,后期介个js搭配使用
file:上传文件
<input 其他属性>
name:表单元素名字,用相同name区分单选框
value:规定input元素的值
主要给后台人员使用
checked:单选框和复选框默认状态 checked=“checked”
maxlength:规定输入字符最大长度
2)<lable>标签:增加光标范围,绑定表单元素
<lable for=“sex">男</lable>
<input type="radio" name='sex" id="sex"/>
lable标签里的for属性应当与相关元素的id属性相同
3)下拉元素<select>表单元素
<select><option></option></select>
1>至少有一对select 2>secleted="selected"为默认选定
4)textarea文本域:特大号文本框
<textarea cols="50" rows="5"> </textarea>
查阅文档 w3school
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战