今天是正式学习的第一天，第一次接触前端内容，蒙了一圈又一圈，老师讲课速度是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. （0303）怎么在sequence中调用agent中的函数以及如何快速实验你的想法？

    https://mp.weixin.qq.com/s/9hDz9-nur5szBib18_yPnA

  2. JS 代码片段 / 预编译/预解析 /执行上下文/ECG/EC/ECS/GO/VO/AO

    代码段概念 一个 script 就是一个代码段 在一个页面中可以有多个代码段 每一个代码段, 彼此独立的, 如果上面的代码段报错了, 不会影响下一个代码段 referenceError 引用错误 下面 ...

  3. 读后笔记 -- Python 全栈测试开发 Chapter11：Python + Requests 实现接口测试

    11.1 Requests 框架 11.1.1 requests 请求 1. reqeusts 库 安装 pip install requests 2. requests 库 GET 方法,参数通过 ...

  4. SSH远程服务器时报错 /bin/bash : Permission denied

    SSH远程服务器时报错 /bin/bash : Permission denied 今日接到用户那边的报障,/bin/bash : Permission denied报错,用户使用的是具有sudo权限 ...

  5. color-color diagram data

  6. 吴恩达老师机器学习课程chapter08——降维

    吴恩达老师机器学习课程chapter08--降维 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十四章. 本章节只有结论,没有任 ...

  7. Oracle11g空表导出设置

    alter system set deferred_segment_creation=false; select 'alter table '||table_name||' allocate exte ...

  8. 08 安装虚拟机：Windows 10

    08 安装虚拟机:Windows 10 在安装虚拟机之前,总是要有安装来源媒体(例如:ISO映像之类),方可顺利进行.在Proxmox VE中有几种将ISO档置入Proxmox VE的方式,本节介绍其 ...

  9. Websocket(websocket自定义协议)

    是基于TCP的 tcp特征: 我发数据对端可以接收到,对端发数据我可以收到 先发先收到,后发后收到 使用websocket客户端发给服务器数据,服务器回客户端返回数据流程(自定义websocket协议 ...

  10. iOS开发之UIImage压缩处理

    IOS中UIImage的数据量压缩有两种方式,一种是图片尺寸不变,降低图片分辨率,代码方法为: //1.0为压缩系数,介于0~1之间.压缩系数越小,会大大降低图片清晰度 NSData *data = ...