前端入门HTML基础

水深无声 2023-09-28 14:38 25阅读 0赞

#### 文章目录 ####

*   *  一、语法规范
     *  二、基本结构
     *  三、常用标签
     *   *   *  1.标题标签
             *  2.段落和换行标签
             *  3.文本格式化标签
             *  4.盒子和span标签
             *  5.图像标签和路径
             *  6.超链接标签
             *  7.注释标签
             *  8.表格标签
             *  9.列表标签
             *  10.表单标签
             *  11.音视频标签

### 一、语法规范 ###

① HTML标签是由尖括号包围的的关键词，例如 ；

② HTML标签通常是，例如和我们称为双标签，但是有些特殊标签是单标签，例如 < br/ >；

③ 双标签关系可分为两类，包含关系和并列关系（标签不可以嵌套）。

### 二、基本结构 ###

<!DOCTYPE html>
    <html>
        <head>
            <title>第一个</title>
        </head>
        <body>
        </body>
    </html>

① 文档类型声明，告诉浏览器当前页面采用的是HTML5版本来显示网页；

② lang用来定义当前文档显示的语言，例如是中文网站，en代表英文网站；

③ 字符集是多个字符的集合，以便计算机能够识别和存储各种文字，防止乱码的出现，在标签内可通过来规定文档的字符编码。

### 三、常用标签 ###

##### 1.标题标签 #####

h1~h6 标题依据重要性递减，标题独占一行，`<h1>我是一级标题</h1>`。

##### 2.段落和换行标签 #####

① 将文字分成若干段落，`<p>我是段落</p>`；

② 强制换行单标签，`<br/>`。

（段落和段落之间的距离大于换行之后的距离。）

##### 3.文本格式化标签 #####

① 加粗，`<strong> 粗 </strong> 或 <B> 粗 </B>`；

② 倾斜，`<em> 倾斜 </em> 或 <I> 倾斜 </I>` ;

③ 删除线，`<del> 删除线 </del> 或 <s> 删除线 </s>`；

④ 下划线，`<ins> 下划 < /ins> 或 <u> 下划 < /u>`。

（均推荐前者，语义更加强烈）

##### 4.盒子和span标签 #####

① 自动换行，`<div> 一个大盒子 </div>`；

② 不会自动换行，`<span> 一个小盒子 </span>`。

##### 5.图像标签和路径 #####

① 图像单标签，`< img src="路径" />`；

![在这里插入图片描述][0596c59fc9d34a79bb6dfa3b615a8be5.png]  
（一般宽度和高度只设置一个就好了，另一项自由缩放就可以了。border 在这里一般不会用，我们是可以在CSS里面设置边框的。）

② 路径

目录文件夹：就是普通文件夹，里面存放了我们做页面所需的全部材料，比如html文件、图片等。  
根目录：打开目录文件夹的第一层就是根目录。  
相对路径：图片相对于html文件的位置，同级直接写；  
绝对路径：是指目录下的绝对位置，直达目标位置，通常很少使用。

##### 6.超链接标签 #####

从当前页面跳转到另一个页面，`<a href="跳转目标" target="目标窗口的弹出方式">文本或图像< /a>`

（网页中的各种元素都可以添加超链接，其中target属性默认值为当前窗口打开页面 \_self ，我们一般可以把它修改为 \_blank 在新窗口打开页面）

① 外部链接需要写成 http:// 的样子；  
② 内部链接是网站内部之间的相互联系，直接写就好了；  
③ 空链接，如果当时没有确定链接目标时，写 \#；  
④ 下载链接，如果href里面地址是一个文件或压缩包，会下载这个文件；  
⑤ 网页元素链接，在网页中的各种网页元素都可以添加超链接；  
⑥ 锚点链接，点击链接可以快速定位到页面中的某个位置。（在链接文本的href属性中，设置属性值为 \#名字 的形式，如`<a href="two">第二季</ a>`，找到目标位置标签，里面添加一个id属性=刚才的名字，如`<h3 id="two">第二季介绍</h3>`）

##### 7.注释标签 #####

``

##### 8.表格标签 #####

基本语法如下：

<table>
        <tr>  
            <th>表头单元格文字内容</th>  
            ...
        </tr>
        <tr>
            <td>单元格内的文字内容</td>  
            ...
        </tr>
    </table>

table表格属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>align</td> 
   <td>left、center、right</td> 
   <td>规定表格相对周围元素的对齐方式</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>1或""</td> 
   <td>规定表格是否有边框，默认为’""没有边框</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>像素值</td> 
   <td>规定单元边与其内容之间空白区域的大小</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>像素值</td> 
   <td>规定单元格之间的空白，默认是2</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素值或百分百</td> 
   <td>规定表格的宽度</td> 
  </tr> 
 </tbody> 
</table>

表格可能过长，我们将表格分割成头部和主体两大部分，将内容折叠起来！

合并单元格？！

① 跨行合并，rowspan=“合并单元格的个数”；  
② 跨列合并，colspan=“合并单元格的个数”。  
（注意，合并完之后，要将多余的单元格删掉。）

##### 9.列表标签 #####

网页中整齐有序的布局用列表来实现。

① 无序列表

ul 里面只能放 li 标签，但是 li 标签里面可以嵌套其他标签。无序列表带有自己的样式属性，实际使用时我们会通过CSS进行设置。

② 有序列表

同上，ol 标签里面只能放 li，但是 li 标签里可以嵌套其他标签。实际使用我们通过CSS来设置属性。

③自定义列表

dl 里面只能包含 dt 和 dd 标签。自定义列表常用于对名词进行解释和描述，列表项前没有任何项目符号。

##### 10.表单标签 #####

在HTML中一个完整的表单通常由表单域、表单控件和提示信息3个部分组成。

<form action="提交后台页面的位置" method="POST" name="表单名字">
        <input type="" value="" name="" maxlength="" checked="checked"/>  
        <label for="man">男</label>
        <input type="radio" name="sex" id="man"/>
        <select>  
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
        </select>
        <textarea rows="3" cols="20">  
        此处显示默认文字
        </>
    </form>

![在这里插入图片描述][c51bfb33db70443b9aaf10cfbeec24c6.png]

注意：

① name 是自定义的每个控件的名字；  
② value 在 text 中显示的是默认文字，在单选、复选框中 value 值不会显示给用户，主要是给后台看的；  
③ 单选框和复选框要有相同的name值；  
④ maxlength 属性规定输入字段中字符的最大长度；  
⑤ checked 属性规定此 input 元素首次加载时应当被选中；  
⑥ 当我们点击了提交按钮，就可把表单内容提交给后台服务器，提交按钮上面的字可通过 value 属性自行设置；  
⑦ label 标签用于绑定一个表单元素，当点击该标签内的文本时，浏览器就会自动将焦点选择到对应的表单元素上，用来增加用户体验；  
⑧ 当需要用户输入更多的内容时，我们使用 textarea 文本域标签；  
⑨ select 下拉表单，在 option 中定义 selected=“selected” ，设置当前项为默认项。

##### 11.音视频标签 #####

① 音频标签

<audio>
    <source src="a.ogg" type="audio/ogg"/>
    <sourse src="a.mp3" type="audio/mpeg"/>
    <source src="a.wav" type="audio/wav"/>
    您的浏览器不支持audio标签
    </audio>

> audio元素有三个基本属性，属性值全为其本身，autoplay 音频在就绪后马上播放，controls 向用户显示播放控件，loop每当音频结束时重新开始播放。

② 视频标签

> video 标签有几个基本属性：  
> ① preload 属性用于设置属性是否预加载，该属性有三个可选择的值：none、metadata、auto，默认为 auto；  
> ② poster 属性用于指定一张图片，在当前视频数据无效时显示，可能是视频正在加载或地址错误等等；  
> ③ autoplay、loop、controls 属性，使用方法同音频播放器一样；  
> ④ width 和 height 属性分别用来设置视频的宽和高。

`下一篇文章将会详细总结CSS基础知识，sei游，伙计们~`

[0596c59fc9d34a79bb6dfa3b615a8be5.png]: https://img-blog.csdnimg.cn/0596c59fc9d34a79bb6dfa3b615a8be5.png
[c51bfb33db70443b9aaf10cfbeec24c6.png]: https://img-blog.csdnimg.cn/c51bfb33db70443b9aaf10cfbeec24c6.png