html开发知识

一：初识html

1：什么是HTML？
超文本标记语言。
2：什么是html语义化？
用标签进行排版。
3：html语义化的优势？
方便团队开发，维护，询搜索；让页面更加的清晰。

二：html经常使用标签

1：h标签

字体加大加粗标签，从h1-h6依次递减，单独占一行。
<h1>aaaaaa</h1>
<h2>aaaaaa</h2>
<h3>aaaaaa</h3>
<h4>aaaaaa</h4>
<h5>aaaaaa</h5>
<h6>aaaaaa</h6>

2：p标签

行标签，又称为段落标签。
<p>aaaaaa</p>

3：span标签

又称为行内标签，不会占行，只会占一小块。
<span>aaaa</span>

4：img标签

<img src="./image/picture.jpg" title="图片没找到哦" alt="图片"/>
属性说明：
src：图片路径
title：当鼠标放到图片上提示内容
alt：图片没找到显示的内容

5：列表标签

ul标签：

无序列表
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>

ol标签：

有序列表
<ol>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ol>

dl标签：

自定义列表
<dl>
<dt>aaaa</dt>
<dt>aaaa</dt>
<dt>aaaa</dt>
</dl>

6：br标签

换行标签
<br/>

7：hr标签

下划线符
<hr/>

8：a标签

连接跳转标签
<a href="www.baidu.com" target="_self/_block">百度</a>
属性说明：
href：跳转的url路径。
target：_self/_block，当前标签面打开/从新打开标签面打开。

9：table标签

表格标签
<table border="1" cellpadding="1" cellspacing="1" width="400px">
        <tr>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
属性说明：
border：表格的边框
cellpadding：列的内边距
cellspacing：列之间的距离
colspan：跨的列数
rowspan：跨的行数

10：from标签

表单标签
<form action="#" method="post">
<fieldset>----------------标签关联标签
<legend align="left" >用户注册信息</legend>
请输入用户名：<input type="text" name="username" value="请输入用户名" size="25" maxlength="20" /><br/>
请输入密码：<input type="password" /><br/>
性别：<label><input type="radio" name="sex" />男</label><label><input type="radio" name="sex" />女</label><br/>---------------让按钮关联汉字，点汉字时就会选中按钮
爱好：<input type="checkbox" name="hobby" />游泳 <input type="checkbox" name="hobby" />篮球 <input type="checkbox" name="hobby" />游戏<br/>
上传图片：<input type="file" /><br/>
<select >
<option>请选择城市</option>
</select><br/>
<textarea cols="50" rows="5" readonly="readonly">协议.........</textarea><br/>
<input type="submit" value="提交" /><input type="reset" value="重置"/><br/>
</fieldset>
</form>
附：
disabled="disabled"指禁用按钮
readonly="readonly" :文本框或密码框为只读的
checked="checked":单选或多选按钮被选中
selected="selected":下拉列表被选中

11：frame标签

iframe：

内嵌框架：
<iframe src="https://www.baidu.com/" width="500px" height="300px" frameborder="1" name="myframe"></iframe>

frameset：

框架集： <frameset rows=”30%,40%30%” > <frame src=”地址” > <frameset cols=”50%,50%”> <frame src=”地址”/> <frame src=”地址”/> </frameset> <frame src=”地址”/> </frameset>