01html笔记胡淑红

一.HTML

#注释，快捷键，符号

ctrl+/注释

shift+alt鼠标向下拉，可同时输入一列相同的内容

ctrl+f查找

ctrl+g转换到输入的行数

text-ovverflow:ellopsis;省略号

&nbsp空格

ctrl+end直接跳转到最后一行

qq截图可以识别文字，这样就可以不用打字啦

f5刷新页面

f12检查

#HTML 标题/段落/换行/链接/图像

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落是通过 <p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

换行<br>

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

一般情况下，a若包含有宽度的盒子，a需要转为块元素，行内块和块元素才可以设置宽高

HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

#加粗/倾斜/删除线/下划线

<strong>...</strong>/<b>...</b>

<em>...</em>/<i>...</i>

<del></del>/<s></s>

<ins></ins>/<u></u>

#分区、跨距标签

<div></div>一人独占一行的大盒子

<span></span>小盒子

#图像标签及属性

<img src="img,jpg" 属性="..."/>同一级

<img src="imgages/img,jpg" 属性="..."/>下一级

<img src="../img,jpg" 属性="..."/>上一级（路径）

以下为属性：

alt图片显示不出时，用文字代替

title鼠标放在图像上，显示文字

width宽度

height高度

border边框粗细

#打开窗口方式/其他链接

打开窗口方式：
_self当前窗口打开页面

​ _blank另起一个新窗口打开

内部链接<a href="gongsijianjie,html">公司简介</a>(网页与网页之间)

空链接<a href="#">公司地址</a>(用#占位置)

下载链接<a href="img.zip">下载文件</a>(zip…文件)

锚点链接<a href="#live">个人生活</a><h3 id="live">个人生活

#特殊字符

&nbsp空格符

&lt小于号

&gt大于号

#table表格标签及属性

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

加粗<th></th>(可直接把<td></td>替换)

align left center right

border 边框

cellpadding像素值（文字与单元格间距）

cellspacing（单元格与单元格间距）

width宽度

height高

#表格结构

<thead></thead>头部

<tbody></tbody>主体部

#合并单元格

跨行合并rowspan="合并单元格个数"

跨列合并colspan="合并单元格个数"

最上最左为目标单元格(在目标单元格中写)eg:<td colspan="2"></td>

方法：1确定跨行/列2找目标单元格，写合并方式3删除多余单元格

#表单标签

表单域<form action="服务器地址" method="提交方式/post" name="...">各种表单元素控件

<input type="属性值"/>

属性值

text文本框，用户可输入任何文字

passward密码框

radio单选按钮

checkbox多选按钮

name定义input元素名称

value规定input元素的值

check首次加载时被选中（checked=“首次加载默认选中”）

maxlength规定输入的字符最大长度

submit提交按钮

reset重置按钮

button点击按钮（获取验证码按钮）

file上传头像或文件/文件域

#列表标签

无序列表

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
</ul>

有序列表

<ol>
    <li>列项1</li>
    <li>列项2</li>
</ol>

如何去掉li前面的小圆点
list-style : none;

自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名称1解释</dd>
    <dd>名称2解释</dd>
</dl>

#label标签

用于绑定表单元素，自动将焦点转到对应元素中eg:单选按钮中，不仅可点按钮选择，点击旁边的男/女的文字也可以选中

<lable for="text">用户名</lable><input type="text">

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

#下拉表单元素

多个选择，节约空间

籍贯<seclect>

<option>选1</option>

<option>选2</option>

</seclect>

#下拉表单元素

多个选择，节约空间

籍贯<seclect>

<option>选1</option>

<option>选2</option>

</seclect>

#文本域表单元素

可输入多行文本，是特大号文本框

今日反馈<texttarea rows="多少行" cols="每行字符数">...</texttarea>