[前端与 HTML | 青训营笔记]HTML的入门基础知识，这里有着几乎所有的基础html知识，学完后就可掌握html的

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

今天要学习的是关于html的基本知识

在下面我会详细的描述关于html的所有基础知识点

HTML文件的语法规范

HTML是由一对标签组成，所有的html文件都包括在这对标签里面

标签里面有着两类关系：

1.包含关系：

例如:

<head>
     <title></title>
</head>

这里就可以说title标签被head标签包含，也可以说head标签包含title标签

2.并列关系：

例如：

<head></head>
<body></body>

这里就是一对并列关系的标签

HTML的基本结构标签

html页面主要骨架由以下几个简单的标签组成

<html></html>【html标签】
<head></head>【文档头】
<title></title>【文档标题】
<body></body>【文档主体】

如下所示

<html>
    <head>
        <title>HTML页面标题</title>
    </head>
    <body>
        今天是笔记打卡的第一天
    </body>
</html>

HTML常用标签

1.标题标签

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

从上到下有六个等级的标题标签
h1是字体最大最粗的标题标签，越往下的标题标签字体会越来越小

2.段落标签

<p></p> 可以把选中文字划为一个段落

3.换行标签

<br>可以把文字在此处进行换行处理

4.文本格式化标签

<strong></strong>作用是把框选中文字加粗
<em></em>作用是把框选中文字倾斜
<del></del>作用是把框选中文字加上删除线
<ins></ins>作用是把框选中文字加上下划线

5.布局标签

<div></div>可用来布局，一行只能放一个div标签
<span></span>可用来布局，一行只能多个span标签

6.图像标签

<img src="图像url/>"可用来打开指定路径的某张图片或者文件

图像标签还拥有许多属性

如下所示

属性	属性值	说明
alt	文本	替换文本。图像不能显示时会出现的文字
title	文本	提示文本。鼠标放到图片上会显示的文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细

注意! ! !

图像标签可以拥有多个属性，写在标签名的后面
属性之间不分先后，以空格分开
属性采取键值对格式书写，即key="value"的格式

图片路径

路径分为相对路径以及相对路径

相对路径：以文件所在位置为参考，图片相对于HTML文件的位置

相对路径分类	符号
同级路径
下一级路径	/
上一级路径	../

相对路径：目录下的绝对位置，通常是从盘符开始的路径

例如"C:\Users\泓\Desktop\壁纸\1.jpg"或者"www.baidu.com/images/2.jp…"

7.超链接标签

<a herf=" 跳转目标" target="窗口打开方式">:可以点击打开另一个的页面

herf属性必须填写
target属性有两种方式
1._self(默认在此界面打开)

2._blank(在新的界面打开)

链接分类

外部链接 <a herf="http://www.baidu.com">百度</a>
内部链接 <a herf="index.html">首页</a>
空链接 <a herf="#">首页</a>
下载链接

定位到文件后会直接下载

<a herf="1.zip">首页</a>

网页元素链接

定位到网页中某个元素，比如图片，表格，音频，视频 <a herf="https://cn.bing.com/images/niuyeye">首页</a>

6.锚点链接

同一个页面内快速定位

<a herf="#one">个人介绍</a>
<h3 id="one">个人介绍</a>

8.表格标签

【table】:表格标签
【thead】:表头标签
【thead】:表身标签
【tr】:行标签
【th】:表头单元格标签
【td】:普通单元格标签

<table>
    <thead>
        <tr>
            <th><th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td><td>
            <td><td>
        </tr>
    </tbody>
</table>

增加单元格

跨行合并：rowspan="增加单元格个数"
跨列合并：colspan="增加单元格哥哥书"

单元格代码写在<td>里面

9.列表标签

无序列表

效果：

列表1
列表2

<ul>
    <li>列表1</li>
    <li>列表2</li>
</ul>

有序列表

效果：

列表1
列表2

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

自定义列表

效果：

名词1
名词1展开
名词1展开
名词1展开

<dl>
    <dt>名词1</dt>
    <dd>名词1展开</dd
    <dd>名词1展开</dd>
    <dd>名词1展开</dd>
</dl>

10.表单标签

表单由三个元素组成

表单域

【action】：用于指定接收并处理表单数据的服务器程序的url地址

【methon】:用于设置表单数据的提交方式，有get和post两种

【name】：用于指定表单名称，用来区分一个页面中的不同表单

<form action="url地址" method="提交方式" name="表单域名称">
</form>

表单控件

1.input输入表单元素
<input type="属性值">

属性值	描述
button	可点击按钮，通常与js结合使用
checkbox	复选框，方形
file	输入字段和浏览按钮，可文件上传
hidden	隐藏输入字段
image	图像形式的提交按钮
password	密码字段，字段中输入的字符会被圆点遮盖
radio	单选框，圆形
reset	重置按钮
submit	提交按钮
text	单行的输入字段，默认宽度20个字符

【name】:同一个name可用于让单选按钮多选一
【value】:可定义input的值
【checked】:规定此元素在首次加载中就被选中
【maxlength】:规定输入字段中字符的最大长度

label标签

作用：为input元素定义标注

可以让单选框或者复选框点击范围更大
比如点击按钮旁边的文字也可以定位到框内
如下：

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

2.select下拉表单元素

作用：有多个选择，并且节约页面控件

代码如下：

籍贯:
<select>
      <option>广东</option>
      <option>广西</option>
      <option>湖南</option>
      <option>湖北</option>
</select>

默认选中可用selected="selected" 3.textarea文本域元素

作用：输入大量的文字

<form>
    今日反馈：
    <tetxarea></textarea>
<form>

属性：
【cols】：框内一行内可以放下的文字个数【rows】:框内的行数

[前端与 HTML | 青训营笔记]