Day01_HTML
1, 概述
// javase (): 记忆
// 前端: javaweb, javaee : 缓冲
// 数据库
// spring 以及衍生框架
// 分布式相关
// 前端学习的目的:
// 1, 至少知道前端是怎么回事?
// 2, 通过前端理解前后端以及服务器的概念
// 3, 能稍微'抄'几个前端页面
// 前端的学习方式, 要求
// 1, 记单个知识点,难, 因为太多了
// 2, 前端不难, 很难接受
// 3, 错误的代码有的时候能运行
// 前端: 后端
// 前端: 前端是用来实现一个/一套网页技术
// 前端: 技术很多/非常多.
// 80% 前端
// java -> class -> 虚拟机
// vue -> 浏览器
// HTML , CSS, JS -> 浏览器
// 浏览器大战:
// 1, 网景 --> 微软 90年代
// 2, 欧朋+火狐 --> 微软 ie
// 3, 谷歌 --> 微软 谷歌
// W3C ---> HTML , CSS,
// 前端很乱.
// 小程序
// 前端: 大前端, 端统一所有端, node, electron, weex, RN, F , 提出一种端统一的思想: wap
//
//
// 小程序: 端统一所有端 2017
// '跳一跳' :
// 小程序: wxml, wxss, js
// 阿里: ahtml
//
// 小程序: 20w
// H5 : HTML5 -->
2, HTML
2.1 回顾
// 互联网的产生: W3C的成立
// 互联网最开始: 看论文 --> 浏览器, HTML
// 网络三要素: HTML HTTP URL
// HTML描述论文格式
// HTTP标记这个论文在网络上怎么传输
// URL: 指示这个论文在互联网的那个位置: 协议 ip/域名 端口
2.2 HTML特点
HTML(hyper text markup language)超文本标记语言
是一个以.html为后缀的文本
是一个文本,也是一个网页;该文本可以用浏览器打开
'超文本':包含文本字体,图片,链接,甚至音乐,程序等元素的文本
HTML 是一个使用'标签'来描述网页的文本 (标签在HTML文本中有实际意义)
// 一个偏高级的语言, 基本都具有:java c c++, python...
// 1,变量定义
// 2,运算符
// 3,逻辑分支语句
// HTML, CSS
2.3 HTML文本的标准结构
<html>
<head>
</head>
<body>
</body>
</html>
// HTML 是一个文本: 特点
// 1, HTML页面/文本,是由标签构成的, 标签成对出现, 有开始有结束
// 2, HTML文本,最外层标签是<html>标签
// 3, 整个HTML文本分为两部分, <head> 和<body>部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owNe9im7-1641383390744)(.\html结构_md.jpg)]
当下时代: 组件化时代
// IDEA: jsp, 模板技术
上世纪90年代初, html 浏览器 --> 看论文 -> 标题/字体/图片…
html刚出来的时候, 并没有很多标签, 描述论文用不上很多标签
后来, 互联网蓬勃发展, html描述更美的页面, 疯狂加标签 加属性 --> 没有
所以产生了CSS, 专门描述页面的美化
实现网页的三个技术基础:
网页: --> 人
HTML --> 骨架
CSS --> 皮肤和血肉
JS --> 大脑逻辑
2.4 Body内的重要标签
<hr>
<br>
<h1>-<h6>
<div>
<a>
<p>
<img>
<input>
< textarea >
< select >
<ol>--<ul>
< table >--<tr>---<td>---<th>
< form >
2.4.1 hr: 横线标签
// <hr> 是一个横线标签
// 并且是一个单标签
// <hr>标签的属性:
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时--默认px )
width:宽度(不带单位时--默认px)
align:对其方式
// 注意:<hr /> 这个写法"自结束", 实际上不是html语法, 是XHTML语法
// <hr width="100px">
// px: 像素, 在html和css中的像素是'逻辑像素', 不是物理像素
2.4.2 br: 换行符
// <br>: 换行符, 能自动换行
// 是一个单标签
2.4.3 hn: 标题标签
// <h1><h2><h3><h4><h5><h6>: 标题标签
//
// 注意: 在一个HTML页面中, h1只能出现一次, h2-h6可以出现多次
// 因为H1里面的内容是作为关键字存在的
// 标题标签的属性:
align
Left:左对齐内容（默认值）
Center:右对齐内容
Right:居中对齐内容
2.4.4 div
// <div>: 对页面进行区块的划分, 对页面进行分区或者节
2.4.5 p: 段落标签
// <p>: 是一个段落标签, (极类似于div, 除了一个特点)
// p标签自带上下边距
2.4.6 a: 超链接标签
// <a>: 是一个超链接标签:在一个页面中通过连接打开一个新的页面
// 属性:
// href: 指示要打开页面的地址, 本质上是一个url: 统一资源定位符
// target:
Target
超链接属性target的value值时默认是_self
_blank:在新窗口打开
_parent:在父窗口打开
_self:它使目标文档显示在超链接所在框架或者窗口中
_top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口
<a href="https://www.baidu.com">百度</a>
<a href="https://item.taobao.com/item.htm?spm=a21bo.jianhua.201876.6.5af911d9V3vHyO&id=644011728962&scm=1007.34127.227518.0&pvid=71082027-1184-44b5-be5a-ebe8175f634b">商品</a>
注意: URL
URL分为三部分(四小部分)
// http://115.29.141.32:8085/#/mall/show/index
// http://cskaoyan.com/forum.php
// https://item.taobao.com/item.htm?scm=10&pvid=71082
// 第一部分: 协议部分 https: http
// 第二部分: 域名 或者 ip+端口 部分
// 第三部分: 虚拟路径+参数: item.htm?scm=10&pvid=71082
2.4.7 img : 图片标签
// <img> : 图片标签
// 单标签
// 属性 src: 指向图片地址: url
// 相对路径:
在前端中
绝对路劲不是以盘符开头的路径, 仅仅是url
前端的相对路径和java写法一样, 相对路径在实际在用户的浏览器解析运行, 还是要拼接成绝对路径发起请求
2.4.8: input: 输入框 : 表单元素
<input> 输入框
单标签
属性 type:
text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框
reset:定义重置按钮。
submit:提交
2.4.9 select : 下拉选
// <select> 下拉选: 成套标签和option
2.4.10 table: 表格
// <table> 表示一个表格, 也是成套的标签
// <tr>: 表示一个表格中一行
// <td>: 表示一行中的一个单元格
属性
Cellpadding:规定单元边沿与其内容之间的空白。
Cellspacing:规定单元格之间的空白。
< table >--<tr>---<td>---<th>
< select >
< textarea >
<ol>--<ul>
< table >--<tr>---<td>---<th>
< form >
ption
#### 2.4.10 table: 表格
```java
// <table> 表示一个表格, 也是成套的标签
// <tr>: 表示一个表格中一行
// <td>: 表示一行中的一个单元格
属性
Cellpadding:规定单元边沿与其内容之间的空白。
Cellspacing:规定单元格之间的空白。
< table >--<tr>---<td>---<th>
< select >
< textarea >
<ol>--<ul>
< table >--<tr>---<td>---<th>
< form >
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
