html主要结构¶
<html>
<head>
<title> hello </title>
</head>
<img src="hello.jpg">
<body>
</body>
</html>
<HTml>也可以
- title会显示为浏览器标签页标题
前端VSCODE 配置¶
1.中文包 2. HTML CSS Support 3. JavaScript (ES6) code snip 4. Mithril Emmet 5. Path Intellisense 6. Vue 3 Snippets 7. Auto Close Tag 8. Auto Rename Tag 9. open in browser 10. Live Server 11. Vue- Official 12. File Utils 13. IntelliJ IDEA Keybindings 这两个倒没必要了: 14. MarsCode AI: Coding Assi... 15. TONGYI Lingma
快捷键:按! 回车,自动生成框架 open with liveserver:这样相当于在本地端口上架设了一个服务器.好处是一旦我们在vscode中保存了,那么网页端就会同步更新.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定字符集 -->
<meta charset="UTF-8">
<!-- 设置网页在移动设备上的缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我们在vscode当中,只要输入h1,然后补全,就会自动生成成对的标签</h1>
<img src="" alt="img标签是类似的">
</body>
</html>
开发常识¶
页面原型¶
往往是一个html
常见标签样式¶
- 编辑器中换行,页面是不会换行的.
引入css
span是一个没有语义的标签.
颜色的描述¶
0完全透明,1完全不透明
具体的颜色可以用截图工具中自带的取色器.
白色是fff
css选择器¶
优先级:id>class>元素 也就是说优先级高的会覆盖低的样式.
还有三种不常用的,因此不说了.
如:后代选择器:
这样,就会选择.navbar后代中所有的a标签
去除下划线¶
视频¶
播放控件就是开始按钮,进度条等等.这个我们一般都加.
宽度高度如果不设,那么就显得很大
父元素body:就是整个网页屏幕了
br:有一个就换一次行
音频:
段落¶
用
<p>/</p>
包裹,会形成一个段落,会自动换行.
gif¶
属性
加粗¶
<b>/</br>包裹,就会加粗 <strong>/</strong>也是一样.但是具有强调意义,爬虫喜欢这个
行高¶
首行缩进¶
空格
也可以css样式
< >大于小于
布局¶
<div></div>标签用来包裹.
这样就能宽度占页面70%(因为父元素是body),并且居中显示了 auto就是居中的意思.
盒子模型¶
外边距指的是和其他元素的距离
高度宽度是content的宽度和高度
四个值是上右下左
这是两个值.当然也能设成一个值,表示上右下左都是这样的宽度
- 开发工具 f12打开开发工具后,找到"检查",就能拾取到页面上的各个盒子
如果设置了padding,那么就会导致盒子撑大了.如果不设置,那么就没有.
如果我不想我的盒子随着padding的大小改变而改变,那么就可以设置weith和height的设定规则:
如果我们设成border-box,并且固定了width和height,那么就会导致如果padding的宽度变大,内容部分就会变小
事实上,我们观察下面的几个图,可以发现:如果设成border-box,那么高度和宽度属性就用来设置整个盒子模型了.
- 开发工具
点击盒子之后,点击"计算样式",就能看到盒子模型了
border¶
三个值分别是宽度 实线 颜色
我们看一下盒子模型:
margin¶
修改margin,在刚才的示例中,就会改变和浏览器页面上边和左边的宽度间距
如果设成auto.在某些情况,这就等同于居中
这样就意味着,上下间距30,左右居中
因此刚才的代码可以改成:
另外,这样可以说是:
body元素是有默认的外边距的,一般是8个像素,因此我们写的网页可能与浏览器边缘有空白
弹性布局¶
主轴:也就是子元素们应该是横向分布还是纵向分布
flex-start:子元素从左往右紧挨着排练
center:所有子元素紧挨着,居中显示
所谓space-around平分剩余空间:
space-between:
演示:如果不用flex布局,那么就如下所示,每个div占一行.
表单¶
提交方式默认是get
当然,这没法提交,得加个按钮
这样填完,点提交之后,会显示:
也即:表单数据不见了
因此,需要设定name
如果是post方式,点击后:
点击查看源代码:
可以发现,post里也是这样的"&" 连接起来的
特点:
表单项¶
隐藏域:填写的时候看不到,但是提交的时候会提交给服务器.
一般buttun这样的按钮得配合js使用
其中一些细节:
单选¶
其中name是表单项的名字.value的值代表提交给后台时实际上提交的值
如果两个选项是同一组的,那么name必须设置成一样.如果不一样,那么会导致能多选.(但我们使用多选一般用复选框)
复选框¶
下拉列表¶
option代表选项
文本域¶
cols:初试大小能输入多少字符 rows:初试能输入多少行
实际上,这个文本域是可以拖动大小的.
按钮¶
button一般只配合js用
reset会清空表单,submit会提交
另外,隐藏数据:
我们把所有东西提交,源码:
这里面id就是隐藏的数据.
也可以直接button:
效果和Input类似.
label标签¶
在刚才选择男女的时候,"女"用label标签包裹,这样可以增强用户体验,不论是点击"女"还是点击前面的小按钮,都是可以点中的.
提示信息¶
placeholder:默认提示信息
这里面还有for的联动:
也就是说,这个label绑定了name这个表单项.效果和上面的一样:点击姓名就会选中输入框
表格¶
table标签是用来定义表格的
子标签:thead表头 tbody 正文
tr代表一行 th表示表头单元格 有字体加粗的效果
td表示普通单元格
页脚/底部区域¶
这个标签其实也是没有实际语义的