加粗
<strong>文本</strong>
倾斜
<em>文本</em>
下划线
<ins>文本</ins>
删除线
<del>文本</del>
换行(单标签)
<br>
水平线(单标签)
<hr>
基本骨架
-
html:整个网页
-
head:网页头部,存放给浏览器看的代码如CSS
-
body:网页主体:存放给用户看的代码如图片文字
-
title:网页标题
快速生成骨架 !配合Enter/Tap键
标签关系
父子嵌套,兄弟并列
注释
<! -- 注释内容-- >
快捷键Ctrl + /
标题标签
h1~h6(双标签)
h1标签在一次网页在只能使用一次,用来存放新闻标题或网页logo
段落标签
标签名:p(双标签)
图像标签
<img src ="./图片路径">
- 属性:alt,title w,h
- alt:在不显示图片时的文字提示
- title:
<img src="./屏幕截图 2023-07-21 223035.png "title="s6截图" alt="s6的第一个王者。">
音频标签
<audio src="路径" controls="controls"></audio>
<audio src="路径" loop autoplay></audio>视频标签
多muted(静音播放) 关键字audio变为video
<video src="./PowerPoint 幻灯片放映 - [先进制造技术] 2023-04-16 17-20-40.mp4" controls loop></video>
相对与绝对路径
./进入当前文件夹
../进入当前文件夹的上一级文件夹
Windows电脑从盘符出发 Mac电脑从根目录/出发
超链接
<a href="https://www.baidu.com/">跳转到百度</a>
新建窗口打开链接
target="_blank"(接到网址后面)
开发初期,不知道链接地址时,用#填到href属性
列表
- 无序列表(ul) ul嵌套li,ul是无序列表,li是列表条目
ul标签里只能包裹li标签 li标签可以包裹任何内容
-
有序列表(ol) ol嵌套li,ol是有序列表,li是列表条目
-
定义列表(dl) dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情
表格
标签:< table >嵌套tr,tr嵌套td/th
th:表头单元格
tr:行
td:内容单元格
提示,默认没有边框线,使用border属性添加
合并单元格
表单


表单项标签
<input>标签
<input type='...'>
type属性值不同,功能不同
- text
- password
- radio
- checkbox
- file
<body>
文本框:<input type="text" placeholder="用户名/邮箱/手机号">
<!-- placeholder=选项提示参数 -->
<br>
<br>
密码框: <input type="password" placeholder="密码">
<br>
单选框: <input type="radio">
<br>
性别:
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
<!-- 默认选项参数"checked" -->
<br>
多选框:
<input type="checkbox" checked> 我同意!
<input type="checkbox" > 我不同意!
<!-- 默认选项参数"checked" -->
<br>
上传文件:<input type="file" multiple>
<!-- multiple参数=上传多个文件 -->
</body><select>下拉菜单
标签:select 嵌套option
城市:
<select>
<option>北京</option>
<option selected>天津</option>
<!-- 单选多选用checked,下拉菜单用selected -->
<option>河北</option>
<option>河南</option>
</select><textarea>文本域
作用:多行输入文本的表单控件
评论:
<textarea>请输入文字</textarea>
<!-- 未来工作中,会用CSS设置尺寸,且禁用拖拽功能 -->label标签
作用:增大表单控件的点击范围
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="human" checked>
<label for="human">女</label>
第二种写法(整个包裹label标签(常用))
<label><input type="radio" name="gender">NULL</label>button标签
<button type="">按钮</button>
type属性
- submit:提交数据到后台
- reset:重置按钮,使用时配合form标签,清空内容
- button:默认没有功能,一般配合js使用
div 和 span标签和字体实体
div与span为无语义的布局标签
- 作用:布局网页(划分网页区域,摆放内容)
字符实体:在网页中预留字符
- 在代码中敲键盘的空格,网页只能使用一个,此时使用字符实体