静态资源Html基础语法

1.div划分【样式控制】

<style>div {/*显示边框*/border: 1px solid pink;/*宽度 占用屏幕的60%*/width: 60%;/*高度 500像素*/height: 500px;/*边框外边距*/margin: auto;/*文字居中*/text-align: center;/*height: 500px;*//*line-height: 500px;*/}</style>

2.div浮动样式

<style>div {border:1px solid pink;}.left {width: 20%;height: 500px;float: left;}.center {width: 60%;height: 500px;float: left;}.right {width: 19%;height: 500px;float: left;}.footer {clear: both;text-align: center;background-color: blueviolet;}
</style>

3.图片插入

<body>
<!--同文件下直接拆入图片，同级不同文件则进入上一层
再写入图片文件夹名称/图片名称-->
<!--图片标签:<imgp属性:-->
<!--        src-图片的路径-->
<!--        title-鼠标悬浮时显示的内容-->
<!--        alt-图片找不到时显示的内容-->
<!--        width-图片的宽度-->
<!--        height-图片的高度--><img src="../images/1.jpg" title="广告" alt="图片找不到啦" width="150px" height="150px"/><img src="https://img2.baidu.com/it/u=143818365,1814365001&fm=26&fmt=auto&gp=0.jpg" width="200px"/>
</body>

4.超链接

<style>a {/*去掉超链接的下划线*/text-decoration: none;/*超链接的颜色*/color: black;}/*鼠标悬浮的样式控制*/a:hover {color: red;}</style>

5.添加背景图片

<style>body {background: url("../images/2051454.jpg");}</style>

6.表单的相关标签

<body>
<!--action="#":指定跳转路径表单项标签：<label>  表单元素说明属性：for属性，属性值必须和表单项标签id属性值一致表单项标签：<input>   多种类型数据属性：type-数据类型id-唯一标识name-提交服务器的标识value-默认的数据值placeholder-默认的提示信息required-是否必须按钮标签：<button>属性：type-按钮的类型(submit提交、reset重置、button普通按钮)--><form action="#" method="get" autocomplete="off"><label for="usename">用户名：</label><input type="text" id="usename" name="usename" placeholder="请在此处输入用户名" required/><label for="password">密码</label><input type="password" id="password" name="password" placeholder="请在此处输入用户名" required/><label for="tel">密码</label><input type="tel" id="tel" name="tel" placeholder="请在此处输入电话号码"/><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form>
</body>

7.其他表单的相关标签

<body>
<!--下拉列表标签：<select>列表项标签：<option>列表项分组标签：<optgroup>   属性：label设置分组名称文本域标签：<textarea>属性：rows-行数cols-列数
-->
<form action="#" method="get" autocomplete="off">所在城市：<select name="city"><option>---请选择城市---</option><optgroup label="直辖市"><option>北京</option><option>上海</option></optgroup><optgroup label="省会市"><option>杭州</option><option>武汉</option></optgroup>
</select><br/>个人介绍：<textarea name="desc" rows="5" cols="20"></textarea><button type="submit">提交</button><button type="reset">重置</button>
</form>
</body>