HTML基础知识点记录 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天标题标签为了使网页具有语义化，

这是我参与「第四届青训营」笔记创作活动的第1天

标题标签

为了使网页具有语义化，我们经常会在页面中用到标题标签，html提供了6个等级的网页标签，即h1-h6（大小递减）。
<h1>我是一级标题</h1>
特点：

加了标题的文字会加粗，字号也会依次变大。
一个标题独占一行。

段落标签

<p>我是段落标题</p>

换行标签

注意是单标签
<br>我是换行标签

文本格式化标签

div和span

没有语义，是一个盒子，用来装内容的
div是divsion的缩写，表示分割、分区，span意为跨度、跨距

<div>大盒子</div>
<span>小盒子</span>

div是大盒子，独自占一行
span是小盒子

图像标签

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

图像标签与路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要个文件夹来管理他们。

目录文件夹:就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材。比如html文件、图片等

根目录:打开目录文件夹的第层就是根目录

相对路径

相对路径:以引用文件所在位为参考基础,而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置

绝对路径

绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，"D:web\img\ogo.gif" 或完整的网络地址http:/ww.itcastcn/images/logo.gif

超链接

链接的语法格式

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

链接分类

外部链接例如< a href="http:// www . baidu . com"> 百度 < /a>。
内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可,例如< a href="index.html">首页。
空链接: 如果当时没有确定链接目标时，< a href="#">首页< /a>。
下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接:点我们点击链接，可以快速定位到页面中的某个位置

在链接文本的href 属性中,设置属性值为#名字的形式,如<ahref=' #two">第2集< /a>
找到目标位置标签,里面添加个id属性=刚才的名字，如: < h3 id="two">第2集介绍< /h3>

内部链接不用加http

注释和特殊字符

 快捷键：ctrl+/

表格标签

表格基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

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

表头单元格

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

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

表格属性

table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="200"

表格结构标签

使用场景:因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。在表格标签中，分别用: < thead> 标签表格的头部区域、< tbody> 标签表格的主体区域这样可以更好的分清表格结构。

合并单元格

跨行合并: rowspan="合并单元格的个数”
跨列合并 : colspan=”合并单元格的个数”
- 跨行:最上侧单元格为目标单元格，写合并代码
- 跨列:最左侧单元格为目标单元格，写合并代码

合并完后要把除目标单元格外的单元格删掉

列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

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

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

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

自定义列表

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

< dl>< /dl>里面只能包括dt、dd。
dt和dd个数没有限制，经常是一个dt对应多个dd。

表单

表单的组成

表单域

表单域是一个包含表单元素的区域。
在HTML标签中，< form>标签用于定义表单域，以实现用户信息的收集和传递。< form>会把它范围内的表单元素信息提交给服务器。

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

input表单元素

在英文单词中，input是输入的意思，而在表单元素中< input>标签用于收集用户信息。
在< input>标签中，包含个type 属性,根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。 <input type="属性值/>"

< input/>标签为单标签
type属性设不同的属性值用来指定不同的控件类型

input标签其他属性

select下拉标签

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

select中至少包含一堆option。
在option中定义selected="selected"时，当前项即为默认选中项。

textarea文本域标签

<textarea row="3" cols="20">
    文本内容
</textarea>

通过textarea标签可以轻松地创建多行文本输入框。
cols="每行中的字符数", rows="显示的行数"，在开发中不会使用，都是用css来改变大小。

HTML基础知识点记录 | 青训营笔记