html笔记

标签

标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。

段落和换行标签

<p>
    
</p>

单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

<br />

单词break的缩写，意为打断、换行。
标签语义：强制换行。
特点：
1.<br/>是个单标签。
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>

<div>和<span>标签

特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签

<img src="图像URL" />

单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顶序，标签名与属性、属性与属性之间均以空格分开
③属性采取键值对的格式，即key="value"的格式，属性="属性值”。

路径

相对路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src=“baidu.gif”/>
下—级路径	/	图像文件位于HTML文件下一级如<img src=“images/baidu.gif”/>
上一级路径	…/	图像文件位于HTML文件上一级<img src=“…/baidu.gif”/>

绝对路径

<img src="C:\Users\fanlangke\Desktop" />
<img src="https://www.bilibili.com/" />

链接标签

1.链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词anchor的缩写，意为：锚。
两个属性的作用如下：

属性	作用
href	用于指定链接目标的ul地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

2.链接分类：

1.外部链接：例如<a href=“http:/www.baidu.com”>百度</a>。

2.内部链接：网站内部页面之间的相互链接直接链接内部页面名称即可，例如<a href=“index.html”>首页</a>。

3.空链接：如果当时没有确定链接目标时，<a href=“#”>首页</a>。

4.下载链接：如果hrf里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
。在链接文本的href属性中，设置属性值为#名字的形式，如<a href=“#two”>第2集</a>
。找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id=“two”>第2集介绍<h3>

注释和特殊字符

注释：快捷键：crtl + /

特殊字符	描述	字符的代码
<	小于号	&It;
	空格符	&nbsp;
>	大于号	&gt;
&	和号	&amp;
￥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°	摄氏度	&deg;
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方	&sup2;
³	立方	&sup3;

表格标签

<table>
	<thead>
         <tr>
    		<th>表头</th><th>表头</th><th>表头</th>
    	</tr>
    </thead>
	<tbody>
        <tr>
    		<td>文字</td>	<td>文字</td>	<td>文字</td>
   		</tr>
    </tbody>
</table>

1.<table></table>是用于定义表格的标签。
2<tr>/tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr><tr>标签中。
4.字母td指表格数据(table data),即数据单元格的内容。

5.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
<th>标签表示HTML表格的表头部分(table head的缩写)

6.在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表
格结构。

表格属性

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式。
border	1或“”	规定表格单元是否拥有边框，默认为”"，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

合并单元格方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

列表

无序列表
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
1.无序列表的洛个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li>与</li>>之间相当于一个容器，可以容纳所有元素。




有序列表
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
1.<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。



自定义列表
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>
1.<dl></dl>里面只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

<input>表单元素

属性值	描述
button	定义可点击按钮（多数情况下，用于通过lavaScript启动脚本）。
checkbox	定义复选框。
file	定义输入字段和“浏览按钮。供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段。用户可在其中输入文本。默认宽度为20个字符。

<input>属性

属性	属性值	描述
name	自定义	定义input元素的名称。
value	自定义	规定input元素的值，
checked	chencked	规定此input元素首次加载时应当被选中。
maxlength	正整数	规定输入字段中的字符的最大长度。

<label>标签

<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素当点击标签内的文本时，刘览器就会自动将焦点（光标转到或者
选择对应的表单元素上用来增加用户体验：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：label:标签的for属性应当与相关元素的id属性相同。

select下拉表单

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

1.<select>中至少包含一对<option>。
A
2.在<option>中定义selected=”selected"时，当前项即为默认选中项。

textarea文本域

<textarea cols="50" rows="5">
    
</textarea>

HTML内联框架

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 “0” 就可以移除边框：

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>