首页 前端知识 前端学习一、HTML篇

前端学习一、HTML篇

2024-11-02 10:11:22 前端知识 前端哥 970 963 我要收藏

一、网页声明

<!DOCTYPE html>
是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超
文本标记性语言或超文本链接标示语言,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5,声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 不是 HTML标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

二、语言类型

<html lang="en">
在HTML中,<html>标签用于定义整个页面的根元素,而lang="en"属性则指定了文档的主要语言是英语。这里的en代表英语(English),但并不意味着页面中只能使用英语,中文等其他语言同样可以使用,只是在浏览器中不会触发翻译功能‌。
此外,lang属性还可以指定其他语言,例如zh-CN代表简体中文。这个属性主要用于告诉浏览器页面的主要语言,以便浏览器可以正确地处理语言相关的格式化,如日期、时间、数字等‌。

三、字符集

<meta charset="UTF-8">
是一个HTML标签属性,用于指定网页的字符编码为UTF-8。‌

在HTML中,<meta charset="UTF-8">是一个元数据标签,用于告诉浏览器该网页使用的字符编码是UTF-8。UTF-8是一种广泛使用的字符编码,能够表示世界上几乎所有的字符,包括中文、日文、韩文等。使用UTF-8编码可以确保网页在不同语言环境下的正确显示,避免乱码问题‌。

具体来说,<meta charset="UTF-8">的作用如下:

  • ‌指定字符编码‌:通过声明字符编码为UTF-8,浏览器知道如何正确解析页面上的文本内容。
  • 避免乱码‌:如果不指定正确的字符编码,浏览器可能会使用默认编码来解析页面内容,导致中文等字符显示为乱码。
  • 支持多语言‌:UTF-8编码支持世界上大多数语言的字符,因此在国际化的网页开发中非常重要‌。

四、标签

标签分为双标签和单标签,标题标签<h1></h1> 就是一个双标签,图像标签<img>就是一个单标签。

1、标题标签

一级标题<h1></h1>

<h1>这是个一级标签</h1>

二级标题<h2></h2>

<h2>这是个二级标签</h2>

三级标题<h3></h3>

<h3>这是个三级标签</h3>

四级标题<h4></h4>

<h4>这是个四级标签</h4>

五级标题<h5></h5>

<h5>这是个五级标签</h5>

六级标题<h6></h6>

<h6>这是个六级标签</h6>

2、段落标签

<p></p>

<p>这是一个段落标签</p>

3、强制换行标签(单标签)

<br>或者<br />

<br>强制换行标签,是一个单标签

4、加粗标签

<strong></strong>或者<b></b>,建议使用前者,更强烈。

<strong>加粗标签</strong>
<b>这个也是加粗标签,但是没有strong强烈</b>

5、倾斜标签

<em></em>或者<i></i>,建议使用前者,更强烈。

<em>倾斜标签</em>
<i>这个也是倾斜标签,但是没有em强烈</i>

6、删除标签

<del></del>或者<s></s>,建议使用前者,更强烈。

<del>删除标签</del>
<s>这个也是删除标签,但是没有del强烈</s>

7、下划线标签

<ins></ins>或者<u></u>,建议使用前者,更强烈。

<ins>下划线标签</ins><br />
<u>这个也是下划线标签,但是没有ins强烈</u><br />

8、图片标签(单标签)

<img>

属性:

  1. src-- 引入图片
  2. alt-- 替换文本,当图片显示不出来的时候可以用文字提示
  3. title-- 提示文本,当鼠标放在图片上的时候可以显示文字
  4. width-- 给图像设定宽度
  5. height-- 给图像设定高度
  6. border-- 给图像设定边框
<h4>图像标签的使用</h4>
<img src="img0.jpg ">
<br>

<h4>alt--替换文本,当图片显示不出来的时候可以用文字提示</h4>
<img src="im.jpg" alt="这是一片郁金香花海">
<br>

<h4>title--提示文本,当鼠标放在图片上的时候可以显示文字</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美">
<br>

<h4>width--给图像设定宽度:</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500">
<br>

<h4>height--给图像设定高度:</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" height="400">
<p style="color: red;">高度和宽度只需设定一个,另一个会等比缩放</p>
<br>

<h4>border--给图像设定边框:</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500" border = "15">

文件路径:

  1. 同级路径,与html在同一文件夹下的图片
  2. 下一级路径,在与html网页的文件夹的上一级文件夹下的图片
  3. 上一级路径,在与html网页的文件夹的下一级文件夹下的图片
  4. 绝对路径,直接从磁盘开始输入的路径或百度上的某个图片路径
<img src="img.jpg">同级路径<br>
<img src="images/img.jpg">下一级路径<br>
<img src="../img.jpg">上一级路径<br>
<img src="https://image.baidu.com">绝对路径 C:\web\img\logo.jpg<br>

9、锚链接(超链接)标签

<a></a>

属性:

  1. href-- 最重要的属性,它指定链接的目标。
  2. target-- _blank,新窗口打开页面。默认为_self,在当前窗口打开页面。
target 打开窗口的方式。默认的值是_self 是在当前窗口打开页面,_blank 是新窗口打开页面。<br>

<h1>1.外部链接--外部网站的地址</h1>
<a href="http://www.qq.com" target="_blank">腾讯</a> <br> 

<h1>2.内部链接</h1>
<a href="vscode.html" target="_blank">vscode</a>

<h1>3.空链接:#</h1>
<a href="#">这是一个空链接</a>

<h1>4.下载链接:地址链接的是文件 .exe 或者 zip 等</h1>
<a href="img.jpg.zip">点击下载压缩包</a>

<h1>5.网页元素的链接</h1>
<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" alt=""></a>

<h1>6.锚点链接:点击后跳转至该页面当前某一位置</h1>
<a href="#AAA">你好!</a>
<h1>sssssss</h1>
<h1>sssssss</h1>
<h1 id="AAA">你好!你好!你好!</h1>
<h1>sssssss</h1>
<h1>sssssss</h1>

10、div标签

<div></div>
‌HTML中的div标签是一个块级元素,用于创建可包含其他元素的块或区域。‌ 它具有创建容器、分组内容、应用样式、创建布局和提供语义的用法。例如,可以使用div标签创建标题和正文的容器‌。

div标签的主要用途包括:

  • 组织内容‌:将相关内容分组,便于管理和维护。
  • ‌应用样式‌:通过div标签和CSS(层叠样式表),可以对页面布局和外观进行控制。
  • ‌提供语义‌:虽然div本身没有语义,但通过合理的使用id或class属性,可以增强页面的语义化,有助于提高网站的可访问性和SEO优化‌。
<div>div标签用来布局,一行只能放一个,一个独占一行(大盒子)</div>
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>

11、span标签

<span></span>
‌HTML的span标签是一个行内标签‌,用于组合文档中的行内元素。它没有固定的格式表现,需要通过应用样式来产生视觉上的变化‌。

span标签主要用于将文档中的文本或其他行内元素进行分组,以便统一应用样式。它支持HTML的全局属性,但本身无法提供视觉上的更改,需要通过类或id属性应用样式来实现特定的视觉效果‌。

<span>用来布局,一行可以放多个span标签(小盒子)</span><br>
<span>AAAAA</span>
<span>BBBBB</span>
<span>CCCCC</span>

12、表格标签

<table></table>

属性:

  1. align-- left、center、right 规定表格相对周围元素的对齐方式
  2. border-- 规定表格单元是否拥有边框,默认无
  3. cellpadding-- 像素值 规定单元边沿与其内容之间的空白,默认为1
  4. cellspacing-- 像素值 规定单元格之间的空白,默认为2
  5. width-- 像素值或百分比 规定表格的宽度
  6. rowspan-- 上下单元格合并 跨行合并 ————最上侧单元格为目标单元格,写合并代码
  7. colspan-- 左右单元格合并 跨列合并 ————最左侧单元格为目标单元格,写合并代码
<table align="center" cellspacing="0" cellpadding="8" border="1" width="500" height="249">
    <!-- th是表头单元格 -->
    <thead>
        <tr>   <th>序号</th>   <th>姓名</th>   <th>性别</th>   <th>年龄</th>   </tr>
    </thead>
        
    <tbody>
        <tr>   <td>111</td>   <td>aaaa</td>   <td>mmmm</td>   <td>12</td>   </tr>
        <tr>   <td>222</td>   <td>bbbb</td>   <td>ffff</td>   <td>14</td>   </tr>
        <tr>   <td>333</td>   <td>cccc</td>   <td>mmmm</td>   <td>13</td>   </tr>
        <tr>   <td>444</td>   <td>dddd</td>   <td>mmmm</td>   <td>12</td>   </tr>
        <tr>   <td>555</td>   <td>eeee</td>   <td>ffff</td>   <td>12</td>   </tr>
    </tbody>
</table>


<!-- 
    合并单元格三部曲:
	1、先确定跨行还是跨列合并
	2、找到目标单元格,写上合并方式=合并的单元格数量。eg: <td colspan="2"></td>
	3、删除多余的单元格 
	
	a row 一行
	a column 一列
-->
<table border="1" cellspacing="0" width="500" height="249">
    <tr>
        <td></td>
        <!-- 跨列合并俩单元格 -->
        <td colspan="2"></td>
        <!-- <td></td> -->
    </tr>
    <tr>
        <!-- 跨行合并俩单元格 -->
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <!-- <td></td> -->
        <td></td>
        <td></td>
    </tr>
</table>

13、列表标签

无序列表

<h1>无序列表</h1>
<!-- 注意:
    1、无序列表的各个列表项之间没有顺序级别之分,是并列的
    2、<ul></ul> 中只能嵌套 <li></li> ,直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
    3、<li>与</li>之间相当于一个容器,可以容纳所有元素
    4、无序列表会自带样式属性,但在实际使用时一般使用CSS来设置
-->
<h4>你的选项?</h4>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

有序列表

<h1>有序列表</h1>

<h4>粉丝排行榜</h4>
<ol>
    <li>a   11</li>
    <li>b   22</li>
    <li>c   12</li>
</ol>

自定义列表

<h1>自定义列表</h1>
<!-- 注意: 
    dl(definition list)是自定义列表的容器。
    dt(definition term)表示定义项,即列表中的术语或概念。
    dd(definition description)则用于提供定义项的描述或解释,即对术语或概念的详细说明。
-->
<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
    <dt>名词2</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>

14、表单标签

表单控件

  • input-- 输入表单元素
  • select-- 下拉表单元素
  • textarea-- 文本域元素
  • label-- 增加表单触发面积,增强用户体验

input标签的type属性

  1. button-- 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。
  2. checkbox-- 定义复选框。
  3. file-- 定义输入字段和“浏览”按钮,供文件上传。
  4. hidden-- 定义隐藏的输入字段。
  5. image-- 定义图像形式的提交按钮。
  6. password-- 定义密码字段,该字段中的字符被掩码。
  7. radio-- 定义单选按钮。
  8. reset-- 定义重置按钮,重置按钮会清除表单中的所有数据。
  9. submit-- 定义提交按钮,提交按钮会把表单数据发送到服务器。
  10. 10.text-- 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。
<!-- form 表单域 -->
<form action="xxx.php" method="get" name="name1">
    <!-- input 输入表单元素 -->
    <!-- text文本框,用户可以在里面输入任何文字 -->
    <!-- maxlength规定输入字段中的字符的最大长度 -->
    <!-- value规定表单中默认显示的文字 -->
    <input type="text" name="username" value="请输入用户名" maxlength="6">
    <br>
    <!-- password密码框,用户看不见输入的密码 -->
    <input type="password" name="pwd">
    <br>
    <!-- radio 单选按钮 可以实现多选一 -->
    <!-- name 是表单元素名称 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    <!-- checked 单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮 -->
    性别:男 <input type="radio" name="sex" value="" checked="checked"><input type="radio" name="sex" value="">
    <br>
    <!-- checkbox 复选框 可以实现多选 -->
    爱好:吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="吃饭">打豆豆<input type="checkbox" name="hobby" value="打豆豆">
    <br>
    <!-- submit 点击了提交按钮,可以把表单域form 里面的表单元素里面的值提交给后台服务器 -->
    <input type="submit" value="免费注册">
    <br>
    <!-- reset 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">
    <br>
    <!-- file 文件域 使用场景 上传文件使用的 -->
    上传头像: <input type="file">
    <br>
    <!-- button 普通按钮 后期结合JS 搭配使用 -->
    按钮:<input type="button" value="点击">
    <br>
    <br><br><br><br><br><br><br>

    <!-- label 当你点击里面的字的时候可以自动选择某个文本框或者选项   lable标签for里的值与input里的id值一样 -->
    <label for="text">用户名:</label> 
    <input type="text" id="text">
    <br>

    <label for="choose">aaa</label>
    <input type="radio" name="choose" id="choose">

    <label for="choose1">bbb</label>
    <input type="radio" name="choose" id="choose1">

    <label for="choose2">ccc</label>
    <input type="radio" name="choose" id="choose2">
    <br>
    <!-- select 下拉表单元素    selected="selected" 默认选项  -->
    籍贯:
    <select>
        <option>上海</option>
        <option>北京</option>
        <option selected="selected">安徽</option>
        <option>四川</option>
        <option>重庆</option>
        <option>天津</option>
    </select>
    <br>

    <label for="select">籍贯:</label>
    <select id = "select">
        <option>上海</option>
        <option>北京</option>
        <option selected="selected">安徽</option>
        <option>四川</option>
        <option>重庆</option>
        <option>天津</option>
        <option>山东</option>
        <option>河南</option>
        <option>河北</option>
        <option>台湾</option>
        <option>香港</option>
        <option>黑龙江</option>
        <option>辽宁</option>
        <option>吉林</option>
        <option>内蒙古</option>
        <option>西藏</option>
        <option>山西</option>
        <option>陕西</option>
    </select>
    <br>


    <!-- textarea 文本域 元素  不需要记住【cols每行能显示几个字符 、 rows行】一般都是用css去实现文本域的大小 -->
    今日反馈:
    <textarea cols="50" rows="5">这个反馈留言是用textarea做的</textarea>
</form>

15、注释与特殊字符

<h1>
    注释的使用方法:快捷键 ctrl + /
    <!--需要注释掉的文字-->
</h1>
<!-- 《这是一段字》静静地吃两口就吃多少饭iu色染发鸡蛋炒饭和v刘海???? -->

<a href="https://blog.csdn.net/jack_rose_me/article/details/124603494">特殊字符一览表</a>
<h4>&nbsp;&nbsp;</h4>
<h4>大于&gt;</h4>
<h4>小于&lt;</h4>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19724.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!