1、标题标签<h1>-<h6>
生成多个级别标题的快捷方法为
输入 h$*（1~6）后回车
回车：
标题的使用例如如下荣耀官网：
2、段落标签<p>
我们输入文字一般输入在段落内部而不是直接输入在外部：
例如荣耀官网：
自己尝试效果：
<body>
<p>文字书写在段落内</p>
<p>这是第二段</p>
</body>
<br>
<br>:在一个段落中的内容换行标签
<body>
<p>文字书<br>写在</br>段落内</p>
</body>
3、水平线标签<hr>(注意为单标签)
<hr>的四个属性则分别为颜色，宽度，高度，对齐方式（默认居中）
<hr color="" width="" size="" align=""/>
例如：
效果：
4、图像标签<image>(注意为单标签)
<image>的五个个属性则分别为路径，图像替代文本（当图像不存在的时候文字替代显示内容和），鼠标悬停提示宽度，高度。
<image src="" alt="" title="" width="" height="">
效果：
图片不存在后：
三种路径区别：
绝对路径：当前文件所在位置为参考点而建立的路径。（从根开始输入完整路径）
相对路径：硬盘根目录或为参考点而建立的路径。（输入图片名即可，用到比较多）
子级关系：/
同级关系：./(一般省略)
父级关系：../
错误示例1：
由于此时download.jps对于practise是子级关系所以更改如下：
错误示例2：
由于此时download.jps对于practise是子级关系所以更改如下：
网格路径：目标图片的链接地址
5、超链接标签<a>
在标签中利用href来输入跳转的目标地址
<a href=""> </a>
例如转跳淘宝页面：
6、表单标签
<input>标签
①<input type="text"><input type="password">
这里举例小米的登录页面：
简单实现方法：
<body>
<form action="">
<input type="text" placeholder="邮箱/手机号码/小米ID"></form><br>
<input type="password" placeholder="密码"><br>
<button>登陆</button>
</form>
</body>
此处的placeholder则是提示信息
我们同样来看淘宝登录界面检查：
②<input type="radio">
<body>
<form action="">
性别<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</form>
</body>
name属性是将单选框进行分类使得一类单选框只能二选一选中不能同时选中
checked属性是选择默认选中的单选框例如下图默认为男
③<input type="checkbox">
之前说到到的checked属性照样用于复选框内
<body>
<form action="">
<input type="checkbox" checked>我同意注册条款
</form>
</body>
③<input type="file">
标签用于实现上传文件功能，其中属性multiple则实现多文件上传
<body>
<input type="file" multiple>
</body>
<select>下拉菜单标签
子标签：option标签，下拉菜单的每一项
常用属性:selected 默认选中
<body>
<select>
<option>c++</option>
<option>c</option>
<option selected>Java</option>
</select>
</body>
textarea文本域标签
常用属性：
cols:规定文本域内可见宽度
rows:规定文本域内可见行数
建议自行动手尝试
7、有序列表<ol>
列表内容由<li></li>包裹
<ol>的type属性：
①数字排列标号：1 ②小写字母排列标号：a ③大写字母排列标号：A
④小写罗马数字排列标号：i ⑤小写罗马数字排列标号：l
例如：
<ol type="I">
<li>威士忌</li>
<li>伏特加</li>
<li>金酒</li>
<li>龙舌兰</li>
<li>百威</li>
</ol>
8、有序列表<ul>
列表内容也由<li></li>包裹
快捷键创建：ui>li*num
<ul>的type属性：
①实心圆：disc ② 空心圆：circle ③方块：square ④不显示：none
举例：
<ul type="circle">
<li>威士忌</li>
<li>伏特加</li>
<li>金酒</li>
<li>龙舌兰</li>
<li>百威</li>
</ul>
我觉得无序列表是前端开发最常用的标签,例如4399小游戏：
9、表格标签<table>
<tr>标签控制行 <th>表格标题行 <td>标签控制列（单元格） <td>内嵌在<tr>中使用
<table>
<tr>
<td>黑棋</td>
<td>白棋</td>
</tr>
<tr>
<td>白棋</td>
<td>黑棋</td>
</tr>
</table>
快捷键使用举例：八行八列
table>tr*8>td*8{黑棋}
合并单元格:rowspan(垂直合并) or colspan
10、容器标签<div>
div是英文“division”的缩写，中文译为“分割、区域”。<div>标签定义 HTML 文档中的一个区块或者一部分。在实际中频繁被运用的一个标签。
关于div旧的用法:
<div id="header"></div> <!--标题 -->
<div id="nav"></div><!-- 导航栏 -->
<div id="article"><!-- 内容 -->
<div id="section"></div>
</div>
<div id="silder"></div><!-- 侧边栏 -->
<div id="footer"></div><!--底部 -->
H5新增特性：
<header></header><!--头部 -->
<nav></nav><!-- 导航 -->
<article></article><!-- 独立完整的内容块 -->
<section></section><!-- 文档的节 -->
<aside></aside><!-- 侧边栏 -->
<footer></footer><!-- 脚部 -->
扫一扫
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
