很楠不爱3

这个屌丝很懒，什么也没留下！

热门标签

前端html基础知识看这一篇就够了（小白必看,超详细）_html前端学习

作者：很楠不爱3 | 2024-05-27 04:40:39

踩

html前端学习

前言

基于对黑马pink老师前端html课程总结，提取其中精华部分，做出的总结笔记

一、什么是html

    ▪ HTML是网页的结构（网页还包括表现CSS、行为js）
    ▪ HTML 指的是超文本标记语言
    ▪ HTML 不是一种编程语言，而是一种标记语言
    ▪ 标记语言是一套标记标签 (markup tag)
    ▪ HTML 使用标记标签来描述网页
    ▪ HTML 文档包含了HTML标签及文本内容
    ▪ HTML文档也叫做web 页面
1
2
3
4
5
6
7

二、如何创建页面

2.1使用工具

    VScode
1

2.2创建步骤

    1首先在VScode创建一个新的文件
    2保存文件为xxx.html
    3编写代码（注输入”!”可直接生成html骨架）
    4通过alt＋B可打开页面
1
2
3
4

三、html正式学习

3.1语法规范及关系

    注：一般都是双标签
1

3.2 html基本结构标签

< title>网站名称< /title>
< body>文件的内容< /body>

3.3html常用标签（上）

3.3.1标题标签< h1>-< h6>

在这里插入图片描述
(在< body>标签内，显示在页面内)

3.3.2段落标签

在这里插入图片描述
段落间有较大空隙

3.3.3换行标签（单标签）

<br/>强制换行，段落间没有空隙
1

3.3.4文本格式化标签

在这里插入图片描述

3.3.5< div>和< span>标签

在这里插入图片描述
没有语义，类似盒子，装内容

3.3.6图像标签

在这里插入图片描述

3.3.7超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
 target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
 
<h4>1.外部链接</h4>
   <a href="https://www.csdn.net/" target="_blank"> CSDN</a>
<h4>2.内部链接: 网站内部页面之间的相互链接,在同一文件夹中</h4>
   <a href="gongsijianjie.html" target="_blank">gongsijianjie</a>
<h4>3.空链接:#</h4> 
   <a href="#">没有做完的链接</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
   <a href="img.zip">下载文件</a>
<h4>5.网页元素的链接,点击图片跳转网页</h4>
   <a href="https://www.csdn.net/"><img src="img.jpg"/></a>
<h4>6.锚点链接，类似目录，点击链接，定位页面某个位置</h4>
   <a href="#名字">需要跳转文字，一定要加入#</a>
   <a id="刚才的名字">跳转后的部分，双引号中的名字和前面插入锚点的名字部分相同，id属性加入什么标签都行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.3.8注释标签

<!--注释语句,不执行在页面中，方便阅读-->
快捷键ctrl+/
1
2

3.3.9特殊标签

主要记住的特殊字符

空&nbsp;&nbsp;格,要加分号
大于号&lt;
小于号&gt;
1
2
3

3.4常用标签（下）

3.4.1表格标签

表格标签是用来展示数据的

3.4.1.1表格的基本语法

<body>
  <table>   <!--定义表格标签-->
    <tr>    <!--定义表格的行，必须嵌套在<table>标签里-->
      <td>单元格内的文字</td>  <!--定义表格的单元格，必须嵌套在<tr>标签里-->
    </tr>
  </table>
</body>
1
2
3
4
5
6
7

表格是用来展示页面的

3.4.1.2 表头单元格标签

<tr>
  <th> 表头单元格</th>
</tr>
1
2
3

表头单元格也是单元格，常用于表格第一行，突出重要性，里面的文字会加粗居中显示

3.4.1.3表格属性

<!--这些属性要写到表格标签table里面-->
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" width="500" height="249">
<!--align属性名，属性值为left center right，规定表格相对周围元素的对齐方式-->
<!--border属性名，属性值1或"",规定表格是否有边框，默认为""，表示没有边框-->
<!--cellpadding属性名，属性值像素值,单元格内容和边框之间的空白，默认为1-->
<!--cellspacing属性名，属性值像素值,单元格和单元格之间的距离，默认为2-->
<!--width属性名，属性值像素值或百分比,规定表格的宽度-->
<!--height属性名，属性值像素值或百分比,规定表格的高度-->
1
2
3
4
5
6
7
8

3.4.1.4表格结构标签

<table>
  <thead>  <!--用于定义表格的头部，里面必须有<tr>标签，放在<table>中-->
    <tr>
      <th>
      </th>
    </tr>
  </thead>
  <tbody><!--用于定义表格的主体，用来放数据本体，放在<table>中-->
    <tr>
      <td>
      </td>
    </tr>
  </tbody>
</tabke>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.4.1.5合并单元格

步骤

先确定是跨行还是跨列合并，跨行用rowspan，跨列用colspan。
找到目标单元格，写上合并方式=合并单元格数目，跨行写在上面的单元格内，跨列写在左边的单元格内。如 < td rowspan=“2”></ td>
删除多余的单元格

下面进行代码展示

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr><!--初始单元格-->
        <tr>
            <td rowspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述上述代码在网页中的显示

3.4.2列表标签

列表是用来布局的

3.4.2.1无序列表

<body>
  <ul>  <!--定义页面中项目的无序列表，<ul>只能嵌套<li>-->
    <li>列表项</li>   <!--定义列表项,<li>放什么都可以-->
    <li>列表项</li>
  </ul>
</body>
1
2
3
4
5
6

3.4.2.2无序列表

<body>
  <ol>  <!--定义页面中项目的有序列表，<ol>只能嵌套<li>-->
    <li>列表项1</li>  <!--定义列表项,<li>放什么都可以-->
    <li>列表项1</li>
    <li>列表项1</li>
  </ol>
</body>
1
2
3
4
5
6
7

3.4.2.3自定义列表

对

<body>
  <dl>  <!--定义页面中项目的自定义列表，<dl>只能嵌套<dt>与<dd>-->
    <dt>名词1</dt>  <!--经常是一个<dt>对应多个<dd>描述，包含关系-->
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
  </dl>
</body>
1
2
3
4
5
6
7

3.4.3表单标签

表单由表单域表单控件提示信息组成

3.4.3.1表单域

<form action="demo.php" method="POST" name="name1">
</form>
<!--<form> 标签用于定义表单域-->
<!--<action> 属性，属性值url地址，用于指定并处理表单数据的服务器程序的url地址-->
<!--<method> 属性，属性值get/post，用于指定并设置表单数据的提交方式-->
<!--<name> 属性，属性值名称，用于指定表单的名称，以区分同一个页面的多个表单域-->
1
2
3
4
5
6

3.4.3.2表单控件

< input >输入表单元素，< input>为单标签

<form action="xxx.php" method="get">
  <!--text文本框，用户可以在里面输入任何文字-->
  <!--value规定input元素的值，即提示信息，打开显示的文字-->
  <!--maxlength属性，属性值正整数，规定输入字段中字符的最大长度-->
  用户名：<input type="text" name="username" value="请输入用户名" maxlength="6">  <br>
  <!--password 密码框，用户看不见输入的信息-->
  密码：<input type="password" name="pwd"> <br>
  <!--radio 单选按钮，可以实现多选一-->
  <!--name是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1-->
  <!--checked属性单选按钮和复选框可以设置，当页面打开的时候可以默认选中这个按钮-->
  性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br>
  <!--checkbox 多选按钮，可以实现多选-->
  兴趣爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby">  打豆豆<input type="checkbox" name="hobby" checked="checked">  <br>
   <!--submit定义提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器-->
  <input type="submit" value="免费注册">  <br>
  <!--重置按钮可以还原表单元素初始的默认状态-->
  <input type="reset" value="重新填写">  <br>
  <!--普通按钮 button，后期结合js，搭配使用-->
  <input type="button" value="获取短信验证码">  <br>
  <!--文件域 使用场景 上传文件使用的-->
  上传头像：<input type="file">  <br>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.name和value是每个表单元素的属性值
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值
3.checked属性主要针对单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

< label>下拉标签

<label for="sex">男</label> <input type="radio" id="sex"/>
<!--label标签用于绑定一个表单元素。当点击标签内文本时，浏览器就会自动聚焦选择对应表单元素上，-->
1
2

< label>标签的for属性应当与相关元素id属性相同

< select>表单元素，下拉表单

<form>
  <select>
    <option selected="selected">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
   </select>
</form>
1
2
3
4
5
6
7

在这里插入图片描述
< textarea>文本域元素

<!--cols="每行中的字符数"，rows="显示的行数"，实际不用，知道就行-->
<form>
  今日反馈：
  <textarea rows="3" cols="50">
  文本内容
  </textarea>
</form>
1
2
3
4
5
6
7

四、总结

以上就是html的全部内容，希望可以对大家有用，如有问题请指正

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/629915