今天是正式学习的第一天,第一次接触前端内容,蒙了一圈又一圈,老师讲课速度是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:目标页面的路径

转义字符(实体):

&lt;&gt;&nbsp;&copy.....

水平分割线
`

`

表单元素:提交数据

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学习记录的更多相关文章

  1. 2022 07 13 第一小组 田龙跃 Java再学习笔记

    1.类名命名规则: 只能由数字字母,下划线,美元符号组成(不能以数字开头,尽量不要用下划线开头) 2.注释(养成多写注释的好习惯) 单行注释 // ctrl+/ 多行注释 // ctrl+shirt+ ...

  2. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  3. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  4. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  5. 1.VUE前端框架学习记录一

    VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...

  6. 开博第一篇:DHT 爬虫的学习记录

    经过一段时间的研究和学习,大致了解了DHT网络的一些信息,大部分还是参会别人的相关代码,一方面主要对DHT爬虫原理感兴趣,最主要的是为了学习python,大部分是别人的东西原理还是引用别人的吧 DHT ...

  7. 前端css学习记录

    参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...

  8. 2019.07.09 纪中_B

    错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...

  9. LEETCODE 07 09

    最近忙着面试耽误了几天,今天刷了07,09都是字符串处理,一个是大数反转,一个是回文数判断,我都是转成字符串处理的,过了是过了,但是挺慢的,先记着,等有机会优化下 题目 给定一个 32 位有符号整数, ...

  10. 2021.07.09 K-D树

    2021.07.09 K-D树 前置知识 1.二叉搜索树 2.总是很长的替罪羊树 K-D树 建树 K-D树具有二叉搜索树的形态,对于每一个分类标准,小于标准的节点在父节点左边,大于标准的节点在父节点右 ...

随机推荐

  1. Python-闭包(Closure)

    一.认识闭包 有时候需要在函数外部得到函数内部的局部变量,但是由于Python作用域的关系,这一点是无法实现的. def f(): n = 22 print(n) #NameError:name 'n ...

  2. 403 forbidden 与 413Too Large

    http://www.ccschy.com/shuma/12846.html https://blog.51cto.com/u_15127556/4543159 查的有关资料如下,最后的原因是服务器网 ...

  3. vue请求插件axios响应拦截302

    axios.interceptors.response.use(function (response) { return response;}, function (error) { // 对请求错误 ...

  4. 随机数Random和SecureRandom

    "Random" objects should be reused Bug Critical Main sources owasp-a6 Available SinceNov 16 ...

  5. Qt学习笔记(一) 关于QWidget类的paintEvent方法

    今天要讨论的也算是QT的核心之一了,那就是如何对widget进行重绘,这里就是可以看到,继承了QWidget的子类,自己重新写一个paintEvent函数就可以了. 这个paintEvent就相当于是 ...

  6. saml login的流程

    用户会访问首页/, 然后进入到指定的一个URL, 就是admin在site-settings里面的设置的那个地址, 发现权限不够,进入到403accesslogin, 然后调用user4032logi ...

  7. win/ubuntu/centos 安装后台监控工具btop

    之前linux平台进行后台监控一直是简单的看top,但界面太难看而且需要记的缩写太多而且不直观(对于我来说),后面有尝试替换htop,扩展支持了鼠标操作以及直观监控,但是界面还是难看,今天查找了一下发 ...

  8. GrADS 读取NetCDF和HDF的ctl文件 SDF文件的描述文件

    翻译自http://cola.gmu.edu/grads/gadoc/SDFdescriptorfile.html 使用GrADS阅读NetCDF和HDF文件 NetCDF和HDF格式的文件被称作自描 ...

  9. mybatisplus SQL一对多

    https://blog.csdn.net/Isyoubao/article/details/122212113 重点:<collection property="nspSchedul ...

  10. maven的setting.xml配置文件详解

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...