前端入门HTML基础

最新推荐文章于 2024-06-30 12:46:56 发布

栈老师不回家

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量177

点赞数 1

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/m0_52861684/article/details/125724333

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、语法规范

① 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="路径" />；

在这里插入图片描述
（一般宽度和高度只设置一个就好了，另一项自由缩放就可以了。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表格属性

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

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

<table>
<thead>头部内容</thead>
<tbody>主体区域</tbody>
</table>

合并单元格？！

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

9.列表标签

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

① 无序列表

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

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

② 有序列表

<ol>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ol>

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

③自定义列表

<dl>
    <dt>名词</dt>
    <dd>解释一</dd>
    <dd>解释二</dd>
</dl>

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

10.表单标签

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

<form action="提交后台页面的位置" method="POST" name="表单名字">
    <input type="" value="" name="" maxlength="" checked="checked"/>  <!--input控件-->
    <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>

在这里插入图片描述

注意：

① 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 src="#">
</video>

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

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