web应用课: html基础标签
http与https区别:3-https与http的区别_哔哩哔哩_bilibili
一.html文件结构,
vscode技巧:
可以直接 !
补全头文件, 然后按三下tab, 移动光标至body
输入div*n
, 可以创建n个div,
其他同理: (tr>td * 3) * 3
, 三个tr, 每个tr里三个td
输入.div-a-b-c
+ 回车, 即可创建<div class="div-a-b-c"></div>
, 同时也支持*n
二. 文本标签
1.ins
加下划线
2. pre
写代码可以用
三. 图片, 音频与视频, 超链接
讲义: 1.2.3 图片 - AcWing , 1.2.4 音频与视频 - AcWing, 1.2.5 超链接 - AcWing
图片: alt就是当图片显示不了时, 显示的文字(单位默认px)
四. Input类
<form actino="/www.baidu.com">
<label for="username">用户名</label>
<input type="text" name="username" id="username">
<br>
<label for="c++"></label>
<input type="radio" name="lang" value="c++" id="c++">
<button type="submit">提交</button>
<br>
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<form>
1. form:
当点提交时, form里的数据会一并清空并提交, 不在form的数据清空但不会提交
2. name, value与id:
因为提交的数据是一对对key&vaule, name是key的名字, value即是提交的值
如图:
id 则是与label对应的, id最好是唯一的, js/css可以通过id索引到此”块”
3. label:
此标签主要是在输入框外提示用户, 此标签可以没有, 但最好加上(养成习惯), 否则会有警告
4. placeholder:
与label不同, placeholder是在输入框内提示用户
5. selected:
<option seletced value="dog">Dog</option>
select加了selected, 表示默认选择此选项
6. raido:
如图:
相同name的只能单选, 不同name可以多选
7. file:
提交文件
<label for="file">文件</label>
<input type="file" name="file" id="file">
8. action:
点提交后, form里数据传给的 函数路径 或者 跳转的页面;
也可以通过js实现点击按钮提交跳转
五. List类
1. ul
如图: {:width=”200px”}
2. dl:
dt: 标题; dd: 定义
如图: {:width=”200px”}
六. 语义标签
作用: 就是划分区域, 便于程序员编辑和搜索引擎解析
七. web页面与web应用的区别
web页面:
主要展示内容, 主要写html与css
web应用:
主要交互动作, 主要写js, 而且一般更加复杂