html基础标签一 - 2019年0831日 20:00

今天开始正式进入html标签的学习，基本功很重要，用心学习！

1、对html标签、元素、属性的理解

 PS：html标签是一个超文本文档的组成部分，这个文档通常由"树状"结构进行组织，标签加上一定的内容组成的元素，通常所说的html元素，只有元素对这个网页可以枯燥无味，给元素加上属性可以使网页呈现意想不到的效果，更清楚的表达超文本文档，就是平时我们看到的绚丽的各种网页。

举例：譬如我想找个女朋友，这个女朋友可能就是我们看到的一个网页，这个女朋友由头发，脸蛋，上身，下身等器官组成，就是我们所说的元素，然后脸蛋皮肤很白，有光泽就是对脸蛋的一个表述，使脸蛋更清晰。

html表示：

<女朋友>

    <脸蛋  颜色="白色"  光泽="有"></脸蛋>

</女朋友>

 

2、列表的种类

PS：列表分为有序列表和无需列表，分别用ul和ol表示。

实例

<ul>
<li>苹果</li>
<li>桔子</li>
<li>香蕉</li>
<li>草莓</li>
</ul>

实例

<ol>
<li>html基础</li>
<li>php基础</li>
<li>项目开发</li>
</ol>

3、列表与表格的区别于联系

PS：列表通常是有序或无序的少量的数据格式的描述，当用于数据多列显示，需要有头尾与标题表述时，一般使用表格

4、工作计划的三种实现方式

实例

<ul>
<li>html基础</li>
<li>php与框架基础</li>
<li>项目开发</li>
</ul>

<ol>
<li>html基础</li>
<li>php与框架基础</li>
<li>项目开发</li>
</ol>

<dl>
<dt>超大型CMS项目开发计划<dt>
<dd>1、html基础</dd>
<dd>2、php与框架基础</dd>
<dd>3、项目开发</dd>
</dl>

5、商品清单

实例

<table border="1"  cellpadding="0" cellspacing="0">
		<caption>进货单</caption>
		<thead>
			<th>ID</th>
			<th>名称</th>
			<th>价格</th>
			<th>数量</th>
			<th>时间</th>
		</thead>
		<tr>
			<td>1</td>
			<td>苹果</td>
			<td>23元</td>
			<td>30斤</td>
			<td>2019年09月31日</td>
		</tr>
		<tr>
			<td>2</td>
			<td>香蕉</td>
			<td>26元</td>
			<td>4斤</td>
			<td>2019年09月31日</td>
		</tr>
		<tr>
			<td colspan="5" align="right">分页: 共1页</td>
		</tr>
	</table>

6、注册表单

实例

	<h2>用户注册</h2>
	<form action="" method="post">
		<p>
			<label for="username">账号：</label>
			<input type="text" id="username" name="username" placeholder="请输入账号" />
		</p>
		<p>
			<label for="password">密码：</label>
			<input type="password" id="password" name="password" placeholder="密码长度在6-18位" />
		</p>
		<p>
			<label for="email">邮箱：</label>
			<input type="email" id="email" name="email" placeholder="example@qq.com" />
		</p>
		<p>
			<label for="age">年龄：</label>
			<input type="number" id="age" name="age" placeholder="请输入年龄" min="15" max="100" />
		</p>
		
		<p>
			<label for="">省份：</label>
			<select name="" id="">
				<optgroup label="东区">
				<option value="">--上海--</option>
				<option value="">--北京--</option>
				<option value="">--广东--</option>
				</optgroup>
				<optgroup label="西区">
				<option value="">--上海--</option>
				<option value="">--北京--</option>
				<option value="">--广东--</option>
				</optgroup>
			</select>
		</p>
		
		<p>
			<label for="">性别：</label>
			<input type="radio" name="sex" value="男"  > <label>男</label>
			<input type="radio" name="sex" value="女" > <label>女</label>
		</p>
		
		<p>
			<label for="">爱好：</label>
			<input type="checkbox" name="love[]" value="打篮球"  > <label>打篮球</label>
			<input type="checkbox" name="love[]" value="玩游戏" >  <label>玩游戏</label>
		</p>
		
		<p>
			<input type="submit" name="submit" value="提交" />
			<input type="reset" name="reset" value="重置" />
		</p>
	</form>

7、总结

PS：表单是比较重要的，通常与客户的交互用的比较多，由于有点基础，有点基础，继续努力！感谢老师