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>
2022-07-09 第一小组 张明旭 前端HTML学习记录的更多相关文章
- 2022 07 13 第一小组 田龙跃 Java再学习笔记
1.类名命名规则: 只能由数字字母,下划线,美元符号组成(不能以数字开头,尽量不要用下划线开头) 2.注释(养成多写注释的好习惯) 单行注释 // ctrl+/ 多行注释 // ctrl+shirt+ ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- 开博第一篇：DHT 爬虫的学习记录
经过一段时间的研究和学习,大致了解了DHT网络的一些信息,大部分还是参会别人的相关代码,一方面主要对DHT爬虫原理感兴趣,最主要的是为了学习python,大部分是别人的东西原理还是引用别人的吧 DHT ...
- 前端css学习记录
参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...
- 2019.07.09 纪中_B
错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...
- LEETCODE 07 09
最近忙着面试耽误了几天,今天刷了07,09都是字符串处理,一个是大数反转,一个是回文数判断,我都是转成字符串处理的,过了是过了,但是挺慢的,先记着,等有机会优化下 题目 给定一个 32 位有符号整数, ...
- 2021.07.09 K-D树
2021.07.09 K-D树 前置知识 1.二叉搜索树 2.总是很长的替罪羊树 K-D树 建树 K-D树具有二叉搜索树的形态,对于每一个分类标准,小于标准的节点在父节点左边,大于标准的节点在父节点右 ...
随机推荐
- Markdown的在线使用
欢迎使用 Markdown在线编辑器 MdEditor Markdown是一种轻量级的「标记语言」 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容 ...
- 软件开发流程-路飞项目需求- pip永久换源-虚拟环境-路飞项目前后端创建-包导入-后端项目调整目录
目录 软件开发流程-路飞项目需求- pip永久换源-虚拟环境-路飞项目前后端创建-包导入-后端项目调整目录 今日内容概要 今日内容详细 1 软件开发流程 2 路飞项目需求 3 pip永久换源 4 虚拟 ...
- You are using pip version 8.1.2, however version 23.0 is available.You should consider upgrading via the 'pip install --upgrade pip' command.
今天使用python2安装es模块时报错: 原因是pip(模块管理工具)版本过低,需先升级pip,再进行安装 先替换pip的镜像,默认镜像拉取慢,还可能会失败 cd ~;mkdir .pip;touc ...
- Python学习笔记（一）环境确认
1.安装环境 1)python解释器 版本3.10.2 安装完毕后在命令提示符窗口中输入python显示版本信息 2)开发工具 pycharm 2021.1.3 2.新建项目 创建项目后修改解释器配置 ...
- Neural Network模型复杂度之Batch Normalization - Python实现
背景介绍 Neural Network之模型复杂度主要取决于优化参数个数与参数变化范围. 优化参数个数可手动调节, 参数变化范围可通过正则化技术加以限制. 本文从参数变化范围出发, 以Batch No ...
- js引入样式资源报错
如上图,import这几个样式资源为什么会报错,怎么解决呢,而且那个jquery-ui之前也会报错但是现在刷新一遍他又不报错了其他的css文件报错 图片转代码服务由CSDN问答提供 功能建议 im ...
- [部署日记]Android Studio在同步Gradle的时候提示Could not resolve com.android.tools.build:gradle:7.0.4
一波未平一波又起,好家伙直呼好家伙. 问题来源: 在想好APP起什么名字,放哪里后,打开模拟器准备着手处理时发现, Gradle sync出问题了... "Build"窗口提示: ...
- 基于winds10 安装docker 踩坑记录
1.官方下载 https://www.docker.com/ 2.根据提示安装 并重庆计算机3.双击运行 报 Docker Desktop is shutting down 提示 计算机c: 盘 A ...
- pycharm 连接 docker容器
1.ubuntu 18.04 先安装sudo apt-get install openssh-server 2.修改" /etc/ssh/sshd_config" 改成 Permi ...
- charles小程序抓包
参考链接:https://www.jianshu.com/p/048b67c5ed00 1. 手机上的程序目前按app的抓包方式,配置代 理,下载证书,打开设备---微信---本地网络,就可以直接抓包 ...