html常用标签 简单的css样式
<title>页面标题</title>
<!-- 标题 h1~h6都是标题标签 -->：<h1>静夜思</h1>
<!-- 段落标签 P -->：<p>床前明月光，疑是地上霜。</p>
<!-- 照片 img -->： <img src="./image/preview.gif" alt="失败了" />
<!-- 超链接 a-->： <a href="https://www.baidu.com/">连接到百度</a>
<!-- 表格 table -->：<table> </table>
表格行： <tr> <td> </td> </tr>
横跨列: <td colspan="2">1-2</td>
横跨行：<td rowspan="2">2-1</td>
<!-- 列表 -->
<!-- 有序列表 有序号 ol-->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>梨</li>
</ol>
<!-- 无序序列 没有序号 ul -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>梨</li>
</ul>
对指定的元素属性进行设置
<style>
table,td{
border:1px solid deeppink;
border-collapse: collapse;
}
td{
width: 70px;
text-align: center;
}
</style>
<body>
<form action="提交表单的地址" method="提交的方式 get/post">
<!-- 表单中的组件 -->
<input type="text" name="username" /><label>账号</label>
<!-- 密码框 password-->
<input type="password" name="userpass" /><label>密码</label>
<!-- 只读readonly-->
<input type = "text" readonly value = "20060804006" name="code">
<!-- 隐藏域 -->
<input type="hidden" value="10010" name="Id"/>
<div>
<!-- 单选框 radio -->
<!-- 在一个表单的name一样的单选框会产生互斥性 -->
<input type="radio" value="M" name="sex" id="sexman" /><label for="sexman">男</label>
<input type="radio" value="W" name="sex" id="sexwoman" /><label for="sexwoman">女</label>
</div>
<!-- 复选框 checkbox 不可用 disabled-->
<div>
<input type="checkbox" name="hobby" id="sing" value="sing" /><label for="sing">唱</label>
<input type="checkbox" name="hobby" id="jump" value="jump" /><label for="jump">跳</label>
<input type="checkbox" name="hobby" id="rap" value="rap" /><label for="rap">RAP</label>
</div>
<div>
<!-- 下拉框 select 内容 option 默认选中select-->
<label>省份</label><select name="province" id="province">
<option value="">山东省</option>
<option value="">安徽省</option>
<option value="">新疆维吾尔自治区</option>
<option value="">陕西省</option>
<option value="">云南省</option>
</select>
</div>
<div>
<!-- 文本域 多行文本框 textarea 两个标签中的值就是他的值 注意不要回车-->
<textarea></textarea>
</div>
<button type="submit">提交按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<input type="button" value="普通按钮Input"/>
<input type="submit" value="提交按钮Input"/>
<input type="reset" value="重置按钮Input"/>
<!-- 只有在表单中才有作用 -->
</form>
</body>
<style>
/* 内部样式 */
/* 选择器 */
/* ID选择器 */
#boxa{
height: 100px;
width: 100px;
background-color: blueviolet;
/* 字体颜色 */
color: green;
font-size: 30px;
text-align: center;
/* 单行文本垂直居中 */
line-height: 100px;
/* 字体加粗 */
font-weight: bold;
}
/* 标签选择器 元素选择器 */
div{
height: 100px;width: 100px;
}
/* 类选择器 class='gbred' */
.bgred{
background-color: red;
display: none;
}
</style>
</head>
<body>
<!-- 内联样式 -->
<div style="width: 100px;height: 100px;background-color: pink;"></div>
<div id="boxa">你好</div>
<div class="bgred"></div>
<div></div>
</body>
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
