学习日志--1.html

html5

前端三要素：

1. js 动化（能说会道会交流）

2.css 美化（妆容）

3.html 结构（身材）

jquery echarts (dom)

vue/react/angular (html/css/js)

脚手架（http://localhost:3000）

sass/less （css）

移动互联方向

大前端（移动端）

1. html5

超文本标记语言

解释型标签语言

运行机制？

1) 开发pc - 部署pc - pc-浏览器 file:// 【开发】

2) 开发pc - 部署云服务 - pc-浏览器 http://

apache2 - scp/filezilla

http://www.tyut.edu.cn/

B/S架构 b浏览器(html、css、js) s服务器

面试题：

1. 访问百度/淘宝，浏览器-页面渲染出来中间经历了什么？

2. h5 与h4区别？

标准

doc声明不同

h5新增标签

h5新增api

超文本:

超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）

标记：

标签进行标记， html标签（无法使用自定义标签）

语言：

c、java 编译型语言，

hello.c --gcc--> hello.o --运行-->linux

Hello.java --javac--> Hello.class --运行--> jvm --> linux/win

html、js、css 解释型语言

hello.html --> 浏览器 -> linux/win

执行效率：c > java > js

2. 工具

vscode(koroFileHeader)

3. 前端地位

软件开发主流架构（前后端分离）

前端(html、css、js)

浏览器（终端）显示

pc（淘宝pc）移动端（android/ios/pad h5、混合式app）小程序大屏

后端(Java / python / c# / Nodejs)

逻辑（登录、注册）

数据库操作

中间件操作（消息队列...）

4. html结构

继承 xml

<!DOCTYPE html>

文档类型： html

<html>

<head>

</head>

<body>

</body>

</html>

head中的内容无法显示到浏览器视口中

charset 设定编码格式

viewport 适配移动端

pc分辨率 1480 * 800

手机分辨率 2000 * 400

title 网页标题，显示在选项卡中

apache2 favicon.ico

5. 标签

不区分大小写

单标签

<br/>

双标签

元素

标签 + 内容

<h1>这是一个一级标题</h1>

<div>

</div>

属性

位于开始标签中

核心属性（通用，绝大多数标签都具有的属性）

id 唯一标识

class 分类，可以重复

title 悬浮提示

style 添加css规则的

自有属性

注释

不会被浏览器解释，注释是用来描述代码含义。

6. 块标签（块元素）

特点：

1) 独占一行空间（100%）

2) 高度默认为0，高度由内容决定

3) 可以指定宽、高

4) 用来搭建页面框架

元素：

h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6

h5：header、footer、nav、section、article、aside、address... 语义化标签

简单大方、无招胜有招

7. 行内标签（行内元素）

特点：

1) 行内与其他行内元素共享一行空间

2) 宽高都由内容决定

3) 无法指定宽、高

4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。

元素：

span、a、img

装饰类型标签：strong b em i sub sup ...

功能标签：

超级链接

href="" 跳转

url 跳转到一个外网地址中

相对路径：相对于当前代码所在文件的路径

. 当前目录下

绝对路径：相对于基准点

linux操作系统中

/ 操作系统根目录也就是 /

/var/www/html apache2部署目录

index.html / 代表apache的根部署目录即 /var/www/html

锚点

1. 定义锚点 <div id="top">顶部</div>

2. 跳转 <a href="#top">跳转顶部</a>

其他

target="" 目标

_self 默认值，当前页面

_blank 新页面

img

src 图片地址

1. 网络资源

2. 相对路径

3. 绝对路径

4. base64格式值

alt 图片找不到时候的文本替换

8. 功能标签（功能元素）

1) table 表

tbody 表格体 thead、tfoot

tr 行

td、th 列（容器）

子标签可以为任意其他标签

行中的列数在经过计算后应该是相同的

2) form

用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）

ajax 异步交互

前置技术： http协议

form( action 后端处理接口，enctype 表示编码方式，method请求方法)

method取值

get 用于查询操作，参数携带在url后面

post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中

enctype取值：

application/x-www-form-urlencoded

查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...

schoolName=太原理工大学&userName=陈明

multipart/form-data

用于表单中有附件提交的时候，二进制，无需进行编码

text/plain

纯文本提交

1) input 输入框

注意：input(text、password、radio、checkbox)必须添加name属性， (radio、checkbox)必须添加value属性

<input type="text" /> 单行文本框

<input type="password" /> 密码

<input type="radio" /> 单选按钮

<input type="checkbox" /> 复选按钮

<input type="file"/> 附件

<input type="submit" /> 提交按钮

<input type="reset" /> 重置按钮

<input type="date" /> 日期选择器（h5新增，兼容性差，一般不用）

...

2) textarea 多行文本

3) select 下拉菜单

</select>

iframe

代码演示

hello world

<!--* @Author: jay* @Date: 2021-08-09 20:05:00* @LastEditTime: 2021-08-09 20:09:33* @LastEditors: Please set LastEditors* @Description: hello world* @FilePath: \Briup\Common\study\1-html\1-hello.html
-->
<!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>第一个html</title></head>
<body><h1>hello world</h1>
</body>
</html>

2.block

<!--* @Author: jay* @Date: 2021-08-09 21:04:57* @LastEditTime: 2021-08-10 08:44:13* @LastEditors: Please set LastEditors* @Description: block* @FilePath: \Briup\Common\study\1-html\2-block.html
-->
<!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>块元素</title><style>/*重置样式*/body{margin: 0;}p{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}dl>dd{margin: 0;}</style>
</head>
<body><div>this is first div</div><div>this is second div</div><p>段落1</p><p>段落2</p><ul><li>html</li><li>css</li><li>js</li></ul><dl><dt>学生管理</dt><dd>学生档案</dd><dd>学生请假</dd><dd>学生就业</dd></dl><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3></body>
</html>

3.tyut

<!--* @Author: jay* @Date: 2021-08-09 21:20:08* @LastEditTime: 2021-08-10 23:10:34* @LastEditors: Please set LastEditors* @Description: tyut* @FilePath: \Briup\Common\study\1-html\3-tyut.html
-->
<!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>太原理工大学</title>
</head>
<body><div class="tyut"><header><div class="top_line"></div><div class="second_line"></div><div class="logo"></div>       <ul class="menu"><li class="menu_item"><span>人才培养</span><ul class="sub_menu"><li >本科生教育</li><li >研究生教育</li></ul></li><li class="menu_item"><span>学校概况</span><ul class="sub_menu"><li >学校简介</li><li >历史</li></ul></ul></header></div>
</body>
</html>

4.inline

<!--* @Author: jay* @Date: 2021-08-10 08:45:35* @LastEditTime: 2021-08-10 23:17:27* @LastEditors: Please set LastEditors* @Description: inline* @FilePath: \Briup\Common\study\1-html\4-inline.html
-->
<!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>行内元素</title>
</head>
<body><span>one</span><span>two</span><span>three</span><a href="http://www.baidu.com">百度一下</a><strong>加粗</strong><em>强调</em><i>斜体</i><img width="100px" src="./images/C95528D3-F66B-424f-AFDF-DFCF9E0D0CE4.png" alt=""></body>
</html>

5,6.超链接及跳转

<!--* @Author: jay* @Date: 2021-08-10 23:35:20* @LastEditTime: 2021-08-11 08:35:45* @LastEditors: Please set LastEditors* @Description: a* @FilePath: \Briup\Common\study\1-html\5-a.html
-->
<!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>超链接</title>
</head>
<body><div id="top">顶部</div><a href="http://www.baidu.com" target="_blank">百度一下</a><a href="./6-a.html">2-a</a>    <!-- 相对路径 --><a href="E:/Briup/Common/study/1-html/6-a.html">2-a</a><a href="#bottom">跳转底部</a><a href="mailto://1138447958@qq.com">发邮件给我</a><div style="height: 30000px;"></div><div id="bottom">hello bottom<a href="#top">回到顶部</a></div>
</body>
</html>

7.iamge

8.table

<!--* @Author: jay* @Date: 2021-08-11 15:18:11* @LastEditTime: 2021-08-11 18:38:13* @LastEditors: Please set LastEditors* @Description: table* @FilePath: \Briup\Common\study\1-html\8-table.html
-->
<!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>表格</title>
</head>
<body><table border="1" width="100%" style="border-collapse: collapse;"><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>生日</th></tr></thead><tbody><tr><td rowspan="2">1</td><td>jay</td><td>男</td><td>2021-08-09</td></tr><tr><td>tom</td><td>男</td><td>2021-08-10</td></tr><tr><td colspan="2">vikey</td><td>女</td><td>2021-08-11</td></tr></tbody></table>
</body>
</html>

9.form

<!--* @Author: jay* @Date: 2021-08-11 15:46:28* @LastEditTime: 2021-08-11 18:41:26* @LastEditors: Please set LastEditors* @Description: form* @FilePath: \Briup\Common\study\1-html\9-form.html
-->
<!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>表单</title>
</head>
<body><form action="/user/submit" enctype="application/x-www-form-urlencoded" method="GET"><div><label for="input_user_name">用户名:<input type="text" name="username" id="input_user_name"></label></div><div><label for="input_password">密码:<input type="password" name="passWord" id="input_password"></label></div><div><label for="input_telephone">手机号:<input type="text" name="telepone" id="input_user_name"></label></div><div>性别:<label for="input_gender_male"><input type="radio" value="male" name="gender" id="input_gender_male">男</label><label for="input_gender_female"><input checked type="radio" value="female" name="gender" id="input_gender_female">女</label>   </div><div>地址：<select name="address" id=""><option value="js">江苏</option><option value="sx" selected>山西</option><option value="hn">河南</option></select></div><div>爱好：<input type="checkbox" name="hobbies" value="football">足球<input type="checkbox" checkeds name="hobbies" value="basketbball">蓝球   </div><div>自我介绍：<textarea name="自我介绍" id="" cols="50" rows="4"></textarea></div><div>出生日期：<input type="date" name="birth"/></div><div><input type="submit" value="提交"><input type="reset" value="重置"></div><div>头像<input type="file"/>    <!-- 需要使用enctype="multipart/form-data" --></div></form>
</body>
</html>

10. iframe

<!--* @Author: your jay* @Date: 2021-08-11 15:46:28* @LastEditTime: 2021-08-11 18:43:42* @LastEditors: Please set LastEditors* @Description: iframe* @FilePath: \Briup\Common\study\1-html\9-form.html
-->
<!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>表单</title>
</head>
<body><iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe><form action="/user/submit" enctype="application/x-www-form-urlencoded" method="GET"><div><label for="input_user_name">用户名:<input type="text" name="username" id="input_user_name"></label></div><div><label for="input_password">密码:<input type="password" name="passWord" id="input_password"></label></div><div><label for="input_telephone">手机号:<input type="text" name="telepone" id="input_user_name"></label></div><div>性别:<label for="input_gender_male"><input type="radio" value="male" name="gender" id="input_gender_male">男</label><label for="input_gender_female"><input checked type="radio" value="female" name="gender" id="input_gender_female">女</label>   </div><div>地址：<select name="address" id=""><option value="js">江苏</option><option value="sx" selected>山西</option><option value="hn">河南</option></select></div><div>爱好：<input type="checkbox" name="hobbies" value="football">足球<input type="checkbox" checkeds name="hobbies" value="basketbball">蓝球   </div><div>自我介绍：<textarea name="自我介绍" id="" cols="50" rows="4"></textarea></div><div>出生日期：<input type="date" name="birth"/></div><div><input type="submit" value="提交"><input type="reset" value="重置"></div><div>头像<input type="file"/>    <!-- 需要使用enctype="multipart/form-data" --></div></form>
</body>
</html>

学习日志--1.html相关推荐

HTML5 Canvas 学习日志（三）
2019独角兽企业重金招聘Python工程师标准>>> HTML5 Canvas 学习日志(三) Canvas的11种合成蓝色为destination,粉色为source 1 ...
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介（二）
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 原文:.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 先上项目解决方案图 ...
我的游戏学习日志46——游戏交互设计（2）
我的游戏学习日志46--游戏交互设计(2) 2.游戏界面设计游戏界面在保持一致性.可读性.效率性等普适原则的基础上,还应该特殊关照玩家的沉浸体验. 首要原则是保证游戏的顺畅使用. (1)提高自然性和 ...
0122 - EOS 编程学习日志（1）
EOS 编程到底是什么呢.学什么呢? 抱歉,我现在也不无法回答.不过,我可以告诉你我做了哪些尝试.目前的理解,以及下一步还要做什么. 首先,EOS 开发最重要的文档自然是在 GitHub: githu ...
MVC 学习日志1（上）
MVC 学习日志1(上) 2012.7.5 开始学习MVC,本以为这个框架多难学,学下来的感受是其实也就是编写格式而已,和普通的webform有质的区别.顿时理解那句老话,世上无难事,只怕有心人.只要 ...
opencv生成日志_OpenCV-Utils学习日志：VideoCapture使用样例
1.VideoCapture可以打开多种来源的数据流,但常见的是相机.视频及图像序列三类数据流: (1)打开相机数据流,需要指定相机在主机上的设备编号,若主机上只有一个相机则编号通常是0. (2)打开 ...
python爬虫实训日志_Python学习学习日志——爬虫《第一篇》（BeautifulSoup）
爬虫简介(学习日志第一篇) 一.爬虫介绍爬虫:一段自动抓取互联网信息的程序,从互联网上抓取对于我们有价值的信息. 二.Pyyhon爬虫架构 Python 爬虫架构主要由五个部分组成,分别是调度器.U ...
java框架学习日志-2
2019独角兽企业重金招聘Python工程师标准>>> 上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又 ...
我的游戏学习日志17——游戏元素的解析（1）
我的游戏学习日志17--游戏元素的解析(1) 1.沉浸元素定义:在一般的定义上指通过物理方式和想象进入一个与通常环境不同的场景.(也被也称"置入"和"临场") ...
学习日志（一）安装PySide2遇到的问题及其解决办法
学习日志(一)安装PySide2遇到的问题及其解决办法参考文章: (1)学习日志(一)安装PySide2遇到的问题及其解决办法 (2)https://www.cnblogs.com/yangshua ...

学习日志--1.html

学习日志--1.html相关推荐

最新文章

热门文章