2022-07-09 第一小组 张明旭 前端HTML学习记录
今天是正式学习的第一天,第一次接触前端内容,蒙了一圈又一圈,老师讲课速度是1000圈/s!!!!!!(插一句老师的打字和打代码速度起飞!) 好在有视频回放而且跟了笔记,能复习n遍。加油!!!
主要学习了HTML的内容,
重点: 1、超级链接
2、表格
3、表单
4、浏览器开发工具
知识点及学习程度
学习程度:理解但应用需要进一步练习
知识点:
软件架构:
B/S:Brower浏览器 Server
C/S:使用之前需要安装。Client Server
前后端分离:
前端:能看见的
后端:数据接口,后台url地址,http请求访问url接口,实现数据交互。
浏览器/服务器的开发。
HTML
CSS
JS
HTML:HTML是用来描述网页的一种语言
超文本标记语言。动画。音频,视频,特效,超链。
用标签来定义网页
浏览器
流行浏览器:
1、IE微软宣布永久关闭IE
2、firefox火狐 逐渐没落,中文,firebug
3、Chrome谷歌,行业的规范
4、sarifi,苹果浏览器 webkit
5、其他QQ 360 百度 2345 遨游.....
html:文档的根标签
head:头,标签处。
title:适配搜索引擎。meta charset=utf-8
link:链接css的,引入css样式
style:定义css样式
script:定义js,也可以引入js
body:身体。目前来说在网页上看见的所有的东西都是body里的
浏览器有一个功能:纠偏
基本标签:
h1~h6:标题标签,字体变大,变粗,变黑,上下空一行
p:段落,上下空一行
br:换行,一个br就是一个回车。
文本格式化标签:
超级链接:a(重要)
href:要去的地方
http地址(完整域名):带有http或https的完整网址
默认的方式去到当前项目下某一个页面(地址)
../:返回上一级目录
./:当前目录(不需要写)
target:目标。怎么打开目标地址
_blank:在新窗口打开
_self:在当前窗口打开(默认)
_parent、_top:在父容器(顶级父容器)打开
title:标题,当鼠标悬停在标签上出现的提示文字
图片:img
src:图片的路径
height、width:宽和高(尽量指定一个属性,等比例缩放)
title:
alt:图片无法正常加载的提示文字
align:对齐方式
区块/空白:
div:块。立方体,可以有宽高
span:行。没有宽和高。尺寸是根据内容确定
无序列表:
<ul> <li></li> </ul>
有序列表:
<ol> <li></li> </ol>
自定义列表:
<dl>
<dt></dt>
<dd><dd>
</dl>
表格:一组标签
table>tr>td
<table border="1" cellspacing="0" cellpadding="10" bgcolor="yellow" align="center" height="500" width="500">
框架:ifream
src:目标页面的路径
转义字符(实体):
<> ©.....
水平分割线 `
`
表单元素:提交数据
form:
action:数据的提交地址
注释:
提交和重置按钮,只能控制和他们在同一个form标签内的元素
所有的文本框的内容都是它的value属性
前后端交互的事情,
浏览器开发者工具的使用
id:每个HTML元素的唯一(不能重复)标识
思考:
为什么用户名,密码,邮箱,生日,薪水不加value?
为什么性别,爱好,地址要加value?
表单提交的数据格式:username=admin等号左边是表单元素的name属性,右边是表单元素的value属性
method:
get:提交的数据都会显示在地址栏,不安全,地址栏长度是有限制的。
post:提交的数据是不显示在地址栏,封装一个请求体,长度也没有限制了。
HTML4的表单完事了!!!
什么是HTML5?
1999年HTML4就已经改变了很多了。在HTML4时代好多标签已经废弃了。
在HTML5的时代就不推荐使用。在2012年,推出了新的HTML规范,HTML5。
推出了一些新的标签
audio音频
<audio src=""></audio>
video视频
<video src=""></video>
新增了一些语义化的标签。
语义化:给程序员设立的规则。thead
HTML5兼容性还不是很好。
分为两大类:
1、行级元素:不能自己换行。
2、块级元素:可以自己换行。
课程过程代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:</td><td><input type="text"></td>
</tr>
<tr><td> 密码:
<td><input type="password"></td>
</tr>
<tr>
<td> 性别:</td>
<td><input type="radio" name="gender">男
<input type="radio" name="gender" checked>女</td>
</tr>
<tr><td>爱好:</td>
<td><input type="checkbox" checked>游泳
<input type="checkbox">足球
<input type="checkbox">篮球</td>
</tr>
<tr><td>家庭住址:</td>
<td><select>
<option>吉林省</option>
<option>辽宁省</option>
</select>
<select>
<option>长春市</option>
<option>沈阳市</option>
</select>
<select>
<option>朝阳区</option>
<option>皇姑区</option>
</select></td>
</tr>
<tr> <td>邮箱:</td>
<td><input type="email"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="date"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="number" min="0" max="15000"></td>
</tr>
<tr>
<td>头像</td>
<td><input type="file"></td>
</tr>
<tr>
<td>调色板</td>
<td><input type="color"></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="tellphone"></td>
<tr>
<td></td>
<td colspan="2"><input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="自定义"></td>
</table>
</form>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步