Web学习

Web学习第一天

1.ol为有序列表，li为其所属列表，ul为无序列表
2. a标签是超链接标签，属性值href为相应的连接地址，当使用target时可在新窗口打开链接
具体用例<a href="链接地址" target="_blank">
通过id标签可以使用a的链接快速到达所在项
具体用例：

<h1 id="top">######</h1>
<a href="#a">aa</a>
<a href="#b">bb</a>
<h2 id="a">########</h2>
<h2 id="b">########</h2>
<a href="#top">top</a>

3.<img src="image/2.jpg" alt="sorry" width="300" height="300">
img用于图片的显示，src为到达图片的路径，alt为图片加载不出来时显示使用，height为图片高度，width为图片宽度

• 如果img后面是块级元素，那么这个会计元素将另起一行，h1与p都是块级元素
• 内联元素位于块级元素中不会另起一行如b,em,img
• left和right属性使得文本可以和图片对齐

<p><img src="image/4.jpg" height="100" width="100" align="left">#####</p>
<p><img src="image/4.jpg" height="100" width="100" align="right">#####</p>

• top将文本的第一行与图片的顶端对齐，middle则是文本的组件一行，bottom则是与图片低端一行对齐

<p><img src="image/4.jpg" height="100" width="100" align="top">########</p>
 <p><img src="image/4.jpg" height="100" width="100" align="top">########</p>
 <p><img src="image/4.jpg" height="100" width="100" align="bottom">########</p>

当图片有多种颜色时应该将图片保存为jpeg格式，当图片包含少量的颜色时应该保存为gif或png格式
4.表格

<table>
    <tr>
        <th ></th>
        <th scope="col">2</th>
        <th scope="col">3</th>
        <th>d</th>
    </tr>
    <tr>
        <th scope="row">4</th>
        <td>5</td>
        <td>6</td>
        <td>8</td>
    </tr>
    <tr>
        <th scope="row">6</th>
        <td rowspan="2">5</td>
        <td>6</td>
        <td>6</td>
    </tr>
    <tr>
        <th scope="row">5</th>
        <td colspan="2">9</td>
    </tr>
</table>

tr表示行，td:表示列，th:表示标题，col:列标题，row:行标题，scope:表明元素是行标题还是列标题
colspan为列跨越，rowspan为行跨越

 <table width="400" cellpadding="10" cellspacing="10">

cellpadding为表格中的每个单元格增加内边距，cellspacing在表格的每个单元格之间设置间隔

 <table border="2" bgcolor="#efefef">

border用于设置表格边距，bgcolor用于为表格设置背景颜色
5.表单

<!--action:url页面用于用户提交表单时接收表单的信息-->
<!--method：表单的提交方法有get货post-->
<form action="http://www.baidu.com">
    <p>
        username:<input type="text" name="username" size="15" maxlength="30">
    </p>
<!--input:单行文本框，name:对表单控件进行标识，size:文本框宽度，maxlength:输入字符的最大数量-->
    <p>password:<input type="password" name="password" seze="15" maxlength="30">
        <!--password：密码框-->
    </p>
    <p>
        <input type="radio" name="genre" value="rock" checked="checked">rock
        <input type="radio" name="genre" value="pop">pop
        <input type="radio" name="genre" value="jazz">jazz
    </p>
    <!--radio:单选按钮,value:为选项指定被选中时要发送到服务器的值，checked:指定加载时哪个值会被选中-->
    <p>
        <input type="checkbox" name="service" value="itunes" checked="checked">itunes
        <input type="checkbox" name="service" value="lastfm">last.fm
        <input type="checkbox" name="service" value="spotify">spotify
    </p>
    <!--checkbox:复选框，可选多个选项-->
    <p>
        <select name="devices">
            <option value="ipod">ipod</option>
            <option value="radio">radio</option>
            <option value="computer">computer</option>
        </select>
    </p>
    <!--select:下拉列表框-->
    <p>
        <select name="devices" name="instruments" size="3" multiple="multiple">
            <option value="ipod" selected="selected">ipod</option>
            <option value="radio">radio</option>
            <option value="computer" selected="selected">computer</option>
            <option value="computser" selected="selected">computser</option>
        </select>
    </p>
    <!--size:增加此特性将下拉列表框变为多个选项的列表框-->
    <!--multiple：使得用户可以从这个列表中选择多个选项，选择选项时要按下ctrl键-->
    <p>
        <input type="file" name="user-song">
        <input type="submit" value="upload">
    </p>
    <!--file:用户可选择本地文件进行上传-->
    <textarea name="comments" cols="20" rows="5">enter your comments</textarea>
    <!--textarea:多行文本框，cols:列数（宽），rows:行数-->
    <input type="submit" name="tal" value="tal">
    <!--submit:提交按钮-->
    <p>
        <input type="image" src="image/1.jpg" width="100" height="20">
    </p>
    <!--图像按钮，也可作为提交按钮-->
    <button><img src="image/2.jpg" alt="add" width="10" height="10">add</button>
    <input type="hidden" name="bookmark" value="lyrics">
    <!--button:按钮，hidden:隐藏控件-->
</form>

6.标签表单

<label>age:<input type="text" name="age"></label>
<br/>
gebder:
<input id="female" type="radio" name="gender" value="f">
<label for="female">female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">male</label>
<!--for特性指明<label>元素所关联的表单控件-->
<fieldset>
    <legend>contact details</legend>
    <label>email:<br>
        <input type="text" name="email"/>
    </label><br/>
    <label>mobile:<br/>
        <input type="text" name="mobile"/>
    </label><br/>
    <label>telephone:<br/>
        <input type="text" name="telephone"/>
    </label>
</fieldset>
<!--fieldset:可将相关的表单控件放于fieldset中分成一组-->
<!--lengend元素可以总结跟在起始标签fieldset的后面并且包含一个标题-->

7.浏览器
现在市场上主流浏览器和他的内核如下
主流浏览器指的是在市场有一定市场份额，必须有独立研发的内核，shell和内核。
五大浏览器四大内核
主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。
四大内核：
1、Trident内核，也称IE内核。
2、Webkit内核。Google Chrome， Safari
3、Gecko内核。 Firefox
4、Presto内核。Opera