前端学习笔记（一）——HTML

前端学习笔记（一）——HTML

一、标签

1、单标签：

换行<br />

划线<hr />

图片<img src=""/>

表单<input />

2、文本格式化标签

加粗<b></b>

<strong></strong>

斜体<i></i>

<em><em/>

加删除线<s></s>

<del></del>

加下划线<u></u>

<ins></ins>

3、标签属性

4、图片标签

src url 图像的路径

Alt 文本 图像不能显示是替换文字

title 文本 鼠标悬停显示文字

width height

border 边框

5、链接标签

1、网页跳转

<a> href= "网页路径"</a>
链接地址：http开头
内连接：页面名称+后缀

2、锚点定位

快速到达页面

<a href="#id"></a>

6、base标签

以新网页打开

<base target="_blank"/>新窗口
<base target="_self"/>当前窗口

7、特殊字符

&nbsp；空格

&lt；小于

&gt；大于

8、注释标签

1、<!--    -->

二、相对路径

1、相对路径

../上一级

2、绝对路径

三、列表标签

无序列表：ul

里面只能放li

li是一个容器可以任意放

<ul>
    <li><li/>
</ul>

有序列表：ol

里面放li

自定义列表

<dl>
	<dt>定义标题</dt>
	<dd>定义描述解释</dd>
</dl>

四、表格

1、创建表格

table标签只能放tr

tr里面只能放td

<table>
	<tr>行标签
		<td>单元格</td>
        <td>单元格</td>
	</tr>
    <tr>行标签
		<td>单元格</td>
        <td>单元格</td>
	</tr>
</table>

2、表格属性

border	像素

cellspacing	单元格间距	默认为2 

cellpadding	内容与单元格距离	默认为1

align	水平对齐方式	left、center、right

3、表头标签

<th></th>

4、表格结构

<thead>
    <!--表头-->
    <tr>
        <th></th>
    </tr>
</thead>

<tbody>
    <!--身体-->
    <tr>
        <td></td>
    </tr>
</tbody>

5、表格标题

<caption>表格标题</caption>

6、表格合并

单元格合并

colspan="2"跨列合并
rowspan="2"跨列合并

五、表单控件

表单结构：表单域、提示文本、表单控件

1、input表单控件（文件域）

单标签：<input />

变色龙：通过type属性来变换形状

属性：

文本：type="text"
密码：type="passwors"
maxlength:输入长度
单选按钮：type="radio"<!--一组需要name相同-->
复选框：type="checkbox"<!--一组需要name相同-->
<!-->默认选中checked="checked"</-->

普通按钮：type="button"<!--value=""为显示文字-->
提交按钮type="submit"
重置按钮type="reset"
图像形式的提交按钮：type="image"
<input type="image" src="...">
文件域：type="file"

2、label标签

1、label直接进行包裹

2、定位直接使用id="“和for=”"定位

<label for="two">输入账号：<input type="text"/> <input type="text" id="two"/></label>

3、文本域textarea

<textarea>输入内容</textarea>

4、下拉菜单

<select>
    <option>内容</option>
     <option selected="selected">内容</option>
    <!--selected为默认选中-->
</select>

5、表单域

<form action="">
    <p>用户名 <input type=""/></p>
</form>

常用属性：

	action="url地址"

​	method="get快、显示内容/post慢、安全"

​	name="区分表单"

六、HTML5新标签与特性

1、http：//w3school.com.cn/

<header>头部</header>
<nav>导航栏</nav>
<footer>底部</footer>
<article>文章</article>
<section>定义区域</section>
<aside>侧边</aside>

<input type="text" value="输入明星名字" list="star">
<datalist id="star">
	<option>
    </option>
</datalist>
<!--链接起来、且能筛选-->

<filedset><!--打包，与legend搭配使用-->
	<legend>用户登录</legend>
    <!--写其他内容-->
</filedset>

2、input新增type属性

<form action="">
    邮箱：<input type="email"/>
    电话：<input type="tel"/>
    数字：<input type="number"/>
    网址：<input type="url"/>
    搜索：<input type="search"/>
    区域：<input type="range"/>
    时间：<input type="time"/>
    年月日：<input type="data"/>
    <!--datatime、month、week、color、-->
</form>

3、常用新属性

用户名：<input type="text" placeholder="请输入用户名" aufocus /><!--显示与获取焦点-->
上传：<input type="file" multiple /><!--多文件上传-->

姓名：<input type="file" autocomplete name=""/>
<!--
autocomplete自动记录完成
要求：
1、需要提交按钮
2、这个表单需要名字
3、on/off属性
-->
姓名：<input type="file" /><!--require为不能为空-->

姓名：<input type="file" accesskey="s"/><!--accesskey激活元素的快捷键-->

4、多媒体

embed视频

audio音频：autoplay播放、controls控件显示、loop=“-1”无线循环播放

为了兼容需要MP3、ogg

<audio>
    <source src=".mp3">
    <source src=".ogg">   
</audio>

video视频