以下知识点来自b站黑马视频:https://www.bilibili.com/video/BV1Kg411T7t9?p=1
-
快速复制快捷键:shift+alt+⬇
-
web标准:html是骨架,css是外观,Js是表现
-
html是用来描述web文档的标记语言
-
前端代码通过浏览器来解析渲染
-
网页组成:视频、音频、图片等
-
注释快捷键ctrl+/
-
水平分割线
-
路径
- 绝对路径(了解):从盘开始的路径、网络链接
- 相对路径(常用):从当前文件去找目标文件
标签
一些常用标签
img
- alt:替换文本属性
- title:鼠标悬停能出现文字
audio
- controls:显示播放控件
- autoplay:自动播放
- loop:循环播放
video
- controls:显示播放控件
- autoplay:自动播放(谷歌配合muted来静音播放)
- loop:循环播放
a
- href:跳转地址(若不知道可用#代替)
- target:控制跳转页面是否覆盖原来页面
- 默认值:覆盖
- _blank:不覆盖
列表
-
无序列表
- ul:在ul中只能放li
- li:li中可以嵌套,包含每一行的内容
-
有序列表
- ol
- li
-
自定义列表
- 其中dd前会缩进
表格
-
一些table属性
-
表格大标题和表头单元格,caption与tr同级,th是小标题
-
合并单元格,只有同一结构(thead,tbody,tfoot)和标签才能合并,跨行rowspan,跨列colspan
表单input
-
根据type的属性值可以实现各种功能, 点击链接查看
-
占位符提示信息
- 文本框:
-
实现单选框,使用name属性分组,若要默认选中只需在后面加上checked即可
-
上传多个文件,只要加入multiple单词即可
-
用value值来改按钮上的文字
<!-- 写一个登录框 -->
<form action="这里要写网址">
用户名:<input type="text" >
<br>
<br>
密码:<input type="password">
<br>
<br>
<input type="submit" value="免费注册" >
<input type="reset" >
<input type="button" value="普通按钮">
</form>
button
-
不用表单来做按钮而是直接用button标签
<button type="submit">提交</button> <button type="reset">重置</button> <button type="button">配合js</button>
下拉菜单select
-
select与option是父子关系,若要默认选项加selected
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i9b3aX4B-1651324639534)(C:\Users\11795\AppData\Roaming\Typora\typora-user-images\image-20220406100937236.png)]
<select >
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
</select>
文本域textarea
- rows属性规定行数,cols是宽度,但是一般用css来设置宽高
label标签
- 方法
- 代码
<!-- 绑定内容与表单标签的关系 -->
<!-- 第一种方法 -->
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
<br><br>
<!-- 第二种方法 -->
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
-
效果:点击男就能选中
语义化标签
-
无语义的布局标签
- div:独自占一行
- span:不独自一行,而是连着
-
有语义的标签(用在h5页面)
-
常用的
-
字符实体
- 空格:%nbsp
案例:学生信息表
-
代码
<table border="1" width="400" height="300"> <caption> <h3>优秀学生信息表格</h3> </caption> <tr> <th>年级</th> <th>姓名</th> <th>学号</th> <th>班级</th> </tr> <tr> <td rowspan="2">高三</td> <td>张三</td> <td>110</td> <td>三年二班</td> </tr> <tr> <td>里斯</td> <td>120</td> <td>三年二班</td> </tr> <tr> <td>评语</td> <td colspan="3">优秀</td> </tr> </table>
-
效果
案例:表单
-
代码:
<body> <h1>青春不常在,抓紧谈恋爱</h1> <hr> <form> 昵称: <label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label> <br> <br> 所在城市: <select> <option selected>上海</option> <option>北京</option> <option>广州</option> </select> <br> <br> 婚姻状况: <label><input type="radio" name="hunyin">未婚</label> <label><input type="radio" name="hunyin">已婚</label> <label><input type="radio" name="hunyin">保密</label> <br> <br> 喜欢的类型: <label><input type="checkbox" name="like" checked>可爱</label> <label><input type="checkbox" name="like" checked>性感</label> <label><input type="checkbox" name="like">御姐</label> <label><input type="checkbox" name="like">萝莉</label> <br> <br> 个人介绍: <br> <br> <textarea cols="60" rows="10"></textarea> <br> <br> <h3>我承诺</h3> <ul> <li>年满十八岁</li> <li>年满十八岁</li> <li>年满十八岁</li> </ul> <br> <label><input type="checkbox">我同意所有条款</label> <br> <br> <button type="submit">免费注册</button> <button type="reset">重置</button> </form> </body>
-
效果