一、列表
(一)、列表定义
列表分为以下几种格式:无序列表、有序列表以及自定义列表。
1.无序列表(<ul>)
这种列表格式前方会自动生成一个黑色圆点。
代码示例如下:
<!-- 定义一个无序列表 -->
<ul>
<li>我真服了</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>离了个大谱</li>
</ul>
结果示例如下:
2.有序列表(<ol>)
这种列表格式前方会自动生成数字序号。
代码示例如下:
<!-- 定义一个有序列表 -->
<ol>
<li>我真服了</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>离了个大谱</li>
</ol>
结果示例如下:
3.自定义列表(<dl>)
这种列表格式前方没有任何标识,其中<dt>定义列表标题,<dd>定义列表项。
代码示例如下:
<!-- dl 自定义列表 -->
<!-- dt 定义列表标题 -->
<!-- dd 定义列表项 -->
<dl>
<dt>我真服了</dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dd>第三项</dd>
<dd>离了个大谱</dd>
</dl>
结果示例如下:
二、表单
表单在网页中,无论是提交搜索的信息,还是网上注册等都是需要使用表单。使用表单目的是为了用户同服务器进行动态的信息交流。
(一)、常见属性
属性 | 属性值 | 作用 |
name | 名称 | 用于指定表单的名称,用以区分同一个页面中的多个表单 |
method | get/post | 设置表单数据的提交方式,取值为get或者post |
action | url地址 | 用以指定接收并处理表单数据的服务器程序的url地址;为空则提交给当前页 |
代码示例如下:
<form>
<!-- method 提交方式 get明文 不安全 post相对安全 -->
<div>账号:<input type="text" name="user"></div>
<!-- text 单行文本输入框 输入的内容没有任何限制 -->
<div>密码:<input type="password" name="password"></div>
<!-- password 密码输入框 -->
<div>
<input type="button" value="写字">
<input type="submit" value="提交">
</div>
</form>
结果示例如下:
(二)、input控件
input 是输入的意思,而在表单元素中 <input> 标签用于收集用户信息在 <input> 标签中,包含一个 type 属性,根据不同的 type 属性值,展示不同的控件(如输入框、密码框、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="radio"> | 定义单选按钮 |
<input type="checkbox"> | 定义复选框 |
<input type="text"> | 单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符 |
<input type="password"> | 密码字段。该字段中的字符被掩码 |
<input type="submit"> | 提交按钮,将表单里的信息提交给action所指向的地址 |
代码示例如下:
<form method="post">
<!-- method 提交方式 get明文 不安全 post相对安全 -->
<div>账号:<input type="text" name="user"></div>
<!-- text 单行文本输入框 输入的内容没有任何限制 -->
<div>密码:<input type="password" name="password"></div>
<!-- password 密码输入框 -->
<div>
<input type="radio" name="one" value="a">A
<input type="radio" name="one" value="b">B
<input type="radio" name="one" value="c">C
<input type="radio" name="one" value="d">D
</div>
<!-- 单选按钮 选择后无法取消 -->
<div>
<input type="checkbox" name="two" value="a">A
<input type="checkbox" name="two" value="b">B
<input type="checkbox" name="two" value="c">C
<input type="checkbox" name="two" value="d">D
</div>
<!-- 多选按钮 选择后可以取消 -->
<div>
<input type="button" value="写字">
<input type="submit" value="提交">
</div>
<!-- 提交或其他按钮 -->
</form>
结果示例如下:
三、选择器
(一)、优先级
行内样式>id选择器>class选择器>标签名称选择器
(二)、原则
在优先级相同的情况下遵循就近原则
四、字体样式
(一)、color颜色设置
color 设置字体颜色,也可以设置其他颜色
(二)、font—size大小设置
font—size 设置字体大小 单位 px,
(三)、font-weight粗细设置
font-weight 设置字体的粗细
(四)、font-family 指定字体设置
font-family 可以指定文字的字体
1.代码示例
<head>
<style>
div{color: rgb(239, 11, 197);
/* 16进制颜色 */
font-size: 200px;
/* 文字默认大小为16px */
font-weight: 200;
/* 文字加粗 */
font-family: "华文彩云";
}
</style>
</head>
<body>
<div>
今天热疯啦!
</div>
</body>
2.结果示例
人已经麻了,今天就这样吧.......