HTML学习笔记_html学习笔记(一)-CSDN博客

本文链接：https://blog.csdn.net/Y_Tseng/article/details/82257321

HTML学习笔记

标签	描述
`<h1></h1>`	一级标题标签
`<h2></h2>`	二级标题标签
`<h6></h6>`	六级标题标签
`<b></b>`	加粗
`<strong></strong>`	强调（加粗）
`<i></i>`	斜体
`<em></em>`	强调（斜体）
`<s></s>`	删除线（不建议使用）
`<del></del>`	删除线

区块标签
`<p></p>`	段落，换行，分段
`<div></div>`	布局，自动换行，不分段
`<span></span>`	布局，不换行，分段

单标签
`<hr/>`	水平线，其属性加在斜杠的前面，关键字的后面
`<br/>`	换行，间距大
`<pre></pre>`	显示空格

显示	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和	`&`
"	引号	`"`
§	小节	`§`
©	版权	`©`
®	注册商标	`®`
×	乘号	`×`
÷	除号	`÷`

属性名	描述
href	“链接地址”（#-空链接/返回顶部）
target	不加/_self-本窗口打开_blank-新窗口打开；_parent-父窗口打开；_top-当前窗口打开，框架消失
title	“提示文字（鼠标移上去会显示）”

<img src="" usemap="#Map"/>
<map name="Map">
<area shape="形状"（rect-矩形；circle-圆形；poly-多边形） 
coords="坐标"（矩形-x1,y1,x2,y2-左边顶点和右下角这两点坐标；
              圆形-x,y,radius-中心坐标和半径；
              多边形-x1,y1,x2,y2,x3,y3,...xn,yn）
href="" target="">
</map>

注意：

<img>中的usemap属性引用<map>中的name属性
area元素永远嵌套在map元素内部

表格标签

基本格式：

<table>
    <tr><!--行-->
        <td></td><!--列-->
    </tr>
</table>

<table>属性：

属性名	描述
width	表格的宽度（百分比-根据屏幕宽度来显示；像素-固定大小，不随屏幕大小所显示）
border	围绕表格的边框宽度
cellspacing	单元格之间的距离
cellpadding	单元格边沿与其内容之间的空白
align	表格中内容水平对齐方式（left、center、right）
bgcolor	表格背景颜色

注意：在HTML4.01中，table元素的align和bgcolor不被赞成使用，如今都是CSS样式代替。

<tr>属性：

属性名	描述
align	同上
valign	表格中内容垂直对齐方式（top-顶端，middle-居中（默认值）、botto-地段、baseline-基线）
width	对单元格的宽度进行设置
height	对单元格的高度进行设置
colspan	横跨单元格个数（合并）
rowspan	纵跨单元格个数（合并）

其他标签

标签	描述
`<th></th>`	定义html表格中的表头单元格
`<caption></caption>`	定义表格的标题
`<thead>`	组合表格的表头内容
`<tbody>`	组合表格的主体内容
`<tfoot>`	组合表格的页脚内容

列表标签

无序列表标签：

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

<ul>属性：

type-------disc（实心圆点【默认】）、circle（空心圆点）、square（实心方块）

有序列表标签

<ol>
    <li></li>
    <li></li>
</ol>

<ol>属性：

type-----1（数字排序）
         a（小写英文字母排序）
         A（大写英文字母排序）
         i（小谢罗马字符排序）
         I（大写罗马字符排序）

自定义列表标签

<dl><!--用来创建一个列表快-->
    <dt></dt><!--用来创建列表中的上层项目-->
    <dd></dd><!--用来创建列表中的最下层项目-->
    <dd></dd>

    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

<label>标签【用label包含元素，可以让用户在点击所包含的元素时也能作出反应】

第一种：

<label for="userName">用户名：</label><!--用for绑定input的id-->
<input type="text" id="userName"/><!--文本框-->
<input type="password"><!--密码-->
<input type="radio" name=""><!--单选框-->

第二种：

<label>用户名：<input type="text"/></label>

<frameset>标签【一般作用于网站后台】

<html>
 <frameset cols="25%,50%,25%">
 <!--分割框架，每一项用frame标签承载，frameset不能与body共存-->
        <frame src="XXX.html" />
</frameset>

<frameset>属性

属性名	描述
frameboder	0-表示不要边框；1-表示显示边框
border	边框粗细
bordercolor	边框的颜色
cols	纵向分割页面，数值，百分比和“*”标识
rows	横向分割页面

- <frame>属性

属性名	描述
name	框架名称
src	路径
scrolling	是否要滚动条-auto，yes，no
noresize	定义框架大小是否能手动调节-no，yes（默认）
marginheight	定义框架的上方和下方的边距
marginwidth	定义框架的左侧和右侧的边距

<iframe>标签【内联框架/行内框架/浮动的框架】

<iframe name="" src="" width="" height="" scrolling="">
</iframe>

<iframe>属性

属性名	描述
src
width
height
name
frameborder	是否显示框架周围的边框
scrolling	是否设置滚动条
marginheight	定义iframe的顶部和底部的边距
marginwidth	定义iframe的左侧和右侧的边距