一、图片标签与超链接
<br/>是空格
<hr/>是横线
<img src="" width="" height=""/>
<a href="https://www.baidu.com">点击</a>
<a href="index.html" target="_blank">点击</a>
src是图片所在的地址,后面设置图片的宽高时,建议只设置其中一个的大小。
target="_blank"的属性是在跳转页面时,在另一个窗口打开新页面。
二、无序列表与有序列表和定义列表
<ul type="disc">
<li class="e">1</li>
<li class="e">2</li>
<li class="e">3</li>
<li class="e">4</li>
</ul>
<ol type="1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<dl>
<dt><img src=""/></dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
<ul><ul/>是无序列表,小黑点是disc,小圆圈是circle,小方块是square。
<ol><ol/>是有序列表,默认排序字符是1234....,还可以改别的,如abcd.....。
<dl><dl/>是定义列表,多用于图文描述,如淘宝上一张商品图下面写上商品描述。
三、表格
<table border="1" width="500px" height="400px">
<tr>
<td colspan="2" width="40%"></td>
<td colspan="2" width="40%"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td colspan="2" colspan="40%"></td>
<td colspan="2" colspan="40%"></td>
</tr>
</table>
tr是列,td是行。
border是边框的粗细。
colspan是跨行属性,rowspan是跨列属性。
一行分为100份,一共是100%。
四、表单
<form action="new_file.html" method="get">
<table border="1" width="600px">
<tr><!--文本框:type="text"-->
<td>用户名:</td>
<td><input type="text"/></td>
</tr>
<tr><!--密码框:type="password"-->
<td>密码:</td>
<td><input type="password"/></td>
</tr>
<tr><!--单选按钮:type="password"-->
<td>性别:</td>
<td>
<input type="radio" name="six"/>男<!--加上name属性分成一组就不会男女单选都能选上了-->
<input type="radio" name="six"/>女
</td>
</tr>
<tr><!--复选框:type="checkbox"-->
<td colspan="2"><input type="checkbox"/>同意请打对勾</td>
</tr>
<tr><!--隐藏域:type="hidden"--><!--文件域:type="file"-->
<td>头像:</td>
<td>
<input type="hidden" value="123" />
<input type="file"/>
</td>
</tr>
<tr><!--下拉框:-->
<td>地区:</td>
<td>
<select name="" id="">
<option>请选择省份</option>
<option value="" selected="selected">河北省</option>
<option value="">北京市</option>
<option value="">天津市</option>
</select>
</td>
</tr>
<tr><!--多行文本域:textarea_rows="显示的行数"_cols="每行字符数"-->
<td></td>
<td>
<textarea name="" rows="2" cols="50">用户协议。。。。。遵守。。。。</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="空按钮"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
<td></td>
<td></td>
</tr>
</table>
</form>
method提交方式有两种,用post比get更安全,action="提交地址"。
将河北省设为默认省份用:selected="selected"。
五、类选择器、ID选择器、后代选择器、并集选择器、全局选择器
<!--类选择器-->
在<style></style>标签里
.a{
color: red;
}
在body里
<p class="a">abc</p>
<!--ID选择器-->
在<style></style>标签里
#a{
color: red;
}
在body里
<p id="a">abc</p>
<!--后代选择器-->
在<style></style>标签里
ul li{
color: red;
}
在body里
<ul>
<li>abc</li>
</ul>
<!--并集选择器-->
在<style></style>标签里
h1,.a,#a{
color: red;
}
在body里
<h1></h1>
<p class="a" id="a"></p>
<!--全局选择器-->
在<style></style>标签里
*{background-color:red;}
在body里所有的标签元素都被影响
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)