HTML基础＜1＞

一、图片标签与超链接 

<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里所有的标签元素都被影响