html模板介绍
常用标签
- html标题
<!-- h1 到h6 字体设置大小不一样-->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h6>h6标题</h6>
- html段落
<p>段落</p>
- div布局标签
<div>布局常用标签,里面可以放任何内容标签</div>
- span标签
<span>不换行,存放特殊效果文字和小图片</span>
- 特殊效果标签
<u>文字加下划线</u>
<i>文字倾斜</i>
<b>文字加粗</b>
<s>删除线</s>
- img标签
<img src="C:\Users\27795\Desktop\V.png" alt="图片无法显示的时候显示的文字" title="提示文本">
- 超链接
<a href="https://wangzi.uk/">百度</a>
点击图片跳转
<a href="https://wangzi.uk/"><img src="C:\Users\27795\Desktop\V.png" alt="xxxx"></a>
以新窗口打开跳转
<a href="https://wangzi.uk/" target="_blank"><img src="C:\Users\27795\Desktop\V.png" alt="xxxx"></a>
html使用css方式
div css基础属性
div{
width: 1000;
height: 1000;
background-color: tomato;
}
类选择器
id选择器
层级选择器
组选择器
伪类选择器
列表
列表的显示一般把前面的去掉因为兼容性不好,无序的已经被我删除了
表格
<!-- table 嵌套tr tr嵌套td tr是行 td是单元格-->
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
表单
<!--placeholder是html5.0才有的 以下的是用value 使用value的时候默认值不会消失 -->
<form action="提交地址" method="POST">
<!-- radio单选一组的name必须一样 为了实现radio文字也能点击效果 使用lable checked是默认选中-->
注册:<input type="text" placeholder="name">
<br>
密码:<input type="password">
<br>
单选框:<input type="radio" name="sex" id="man"> <label for="man">男</label> <input type="radio"name="sex" id="woman" checked="checked"><label for="woman">女</label>
<br> <br>
复选框:<input type="checkbox">读书 <input type="checkbox">跑步 <input type="checkbox">旅游
<br> <br>
上传文件: <input type="file">
下拉菜单:
<select name="" id="">
<option value="" selected="selected">中国</option>
<option value="">日本</option>
</select>
<br> <br>
文本域
<textarea name="te" id="" cols="30" rows="10"></textarea>
<!-- 封装好了的按钮 -->
<input type="submit" value="注册">
<!-- 普通按钮 -->
<input type="button" value="注册">
<!-- 重置按钮 -->
<input type="reset">
<button>普通按钮</button>
盒子模型
<style>
div{
width: 300px;
height: 200px;
background: slategrey;
/* 外面的线 */
border: tomato 1px solid;
/* 内边距 */
padding: 20px;
/* 盒子的大小是 width/height+padding+2*border
用下面的box-sizing自动调整到width和height指定长宽
*/
box-sizing: border-box;
/* 外边距和其他盒子产生距离 */
margin: 20px;
}
</style>
div{
width: 1000px;
height: 1000px;
/* 可以指定哪个方向单独画线 */
border-top: solid 1px;
border-bottom: solid 1px;
/*上 左右 下 */
padding: 10px 20px 30px;
/* 居中 */
margin: 0 auto;
}
隐藏标签
/* 下面两种都是隐藏 display不占位 visibility占位 */
display: none;
visibility: hidden;
溢出处理
/* 内容溢出的时候加滑动条 */
overflow: auto;
overflow: scroll;
顶对齐
/* 浮动*/
float: left;
定位
/* 相对定位 占位 定位参照物自己*/
position: relative;
/* 不具备换行 不占位 父级定位则以父级为参照物否则以浏览器*/
position: absolute;
/* 固定定位 不具备换行 不占位 以浏览器为参照物*/
position: fixed;
iframe(框架)
<a href="https://bbs.pediy.com/thread-260110.htm" target="baidu">百度</a>
<iframe src="https://www.baidu.com/" name="baidu"></iframe>