html5学习笔记

显示网页

command + option + i / 右键-检查

utf-8

utf-8是一种国际编码形式可以将汉字正确的显示出来

   <meta charset="UTF-8">

超链接新开窗口

<a href="1.html" target="_blank">speedy</a>

换行

<br>

字体

粗体<b>speedy</b>
斜体<em>speedy</em>
下划线<u>speedy</u>
删除线<s>speedy</s>

表格

<table >
    <thead>--表头
       <tr>
           <th>a</th>
           <th>b</th>
           <th>c</th>
       </tr>
    </thead>
    <tbody>--表体
        <tr>
            <td rowspan="2">1</td>--合并2个列单元格
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
    		<td>7</td>
    		<td colspan="2">8</td>--合并两个行单元格
		</tr>
    </tbody>
    <tfoot>--表脚
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    </tfoot>
</table>

列表元素

有序列表<ol>（属性type设置样式 reversed降序）

<ol>
    <li>a</li>
    	<ol type="a">
   			 <li>speedy</li>
   			 <li>katios</li>
    	</ol>
    <li>b</li>
    <li>c</li>
</ol>
<ol reversed>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

无序列表<ul>
列表中的项<li>

表单元素

<form><!--创建表单-->
    <input type="text"> <!--单行文本框-->
    <br>
    <input type="text" value="speedy"><!--元素类型：文本 / 占位符-->
    <input type="text" placeholder="speedy"><!--不占文本框的位的-->
    <input type="text" placeholder="speedy" maxlength="6"><!--设置最大输入长度-->
    <input type="text" placeholder="speedy" size="50"><!--拓宽单行文本框-->
    <input type="text" value="speedy" readonly><!--只读 不能修改-->
    <input type="password" placeholder="password"> <!--元素类型：密码-->
    
    <textarea rows="20">speeeeeeeeedy</textarea><!--多行 宽度rows 长度cols-->
</form>

按钮

<form>
    <input type="button" value="按钮">
    <button>按钮</button><!--js合作的并且作为绑定事件的-->
    <input type="submit" value="提交">
    <!--提交表单 必须生命form里面的method属性，最好也添加action属性-->
</form>
适用范围 button > input button >input submit

number/range类型input元素

<form>
    <input type="range" min="-100" max="100" step="100">
    <input type="range" min="-100" max="100" step="100" value="-100">
    <!--数字滑动最小值、最大值、步长、初始值-->
    <input type="number" min="-100" max="100" value="0"><!--数字输入-->
</form>

复选框

    <input type="checkbox" >选择
    <input type="radio"  name="s" checked> speeedy 
    <input type="radio"  name="s"> speedy
    <input type="radio"  name="s"> speedy
    <!--选择后不能取消 命名之后就可以三选一 checked就是初始选择-->

select元素

<form>
    <select>
        <option>apple</option>
        <option>banana</option>
        <option>peach</option>
        <!--下拉列表选择强制选-->
    </select>

<input type="text" list="a"> ID值才能使用
<datalist id="a">
    <option>apple</option>
    <option>banana</option>
    <option>peach</option>
    <!--下拉列表 给出参考 可以自己打字进去-->
</datalist>

不同点select不能获取用户输入的

复选框

复选框