web前端基础-你未来的样子，藏在现在的努力里

最新推荐文章于 2024-11-17 18:04:39 发布

XU AE86

最新推荐文章于 2024-11-17 18:04:39 发布

阅读量244

点赞数

文章标签： HTML 语法基础标签网页结构前端开发

本文链接：https://blog.csdn.net/luomoxiaoyaoke/article/details/119560841

版权

HTML设计学习

前言
一、web前端基础介绍
二、HTML语法基础介绍
三、常用标签介绍
总结

前言

又开始新的一段学习，让我们一起愉快的了解下前端设计。送给那些努力挣扎中的奋斗的人们一句话，世事千帆过，前方终会是温柔和月光。

一、web前端基础介绍

1.什么是网页

网页是基于浏览器的应用程序，是数据展示的载体

2.网页的组成

1.浏览器

代替用户向服务器发请求
接收并解析数据展示给用户

2.服务器

存储数据
处理并响应请求

3.协议

规范数据在传输过程中的打包方式

3.开发前的准备

运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
ctrl + - 缩小字体 ctrl + + 放大字体
开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等）
open in browser

二、HTML语法基础介绍

1.什么是HTML？

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容. 大家可以思考下什么是超文本？

2.标签

标签也称为标记或元素，用于在网页中标记内容

1.语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示

2.分类：

双标签：成对出现，包含开始标签和结束标签。例：

<html>

<!-- 内容或其他标签 -->

</html>

单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：

<br>

<br/>

3.标签属性：

标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：

<meta charset="utf-8">

同一个标签中可以添加若干组标签属性，使用空格间隔。例：

 <img src="lily.jpg" width="200px" height="200px">

3.运用

1.创建网页文件，使用.html或.htm作为文件后缀

2.添加网页的基本结构（little tips：在VSCODE中，！+Tab键，快速生成网页基本结构）

<!doctype html>

<html>

    <head>

        <title>网页标题</title>

        <meta charset="utf-8">

    </head>

    <body>

         网页主体内容

    </body>

</html>

1.标签嵌套

在双标签中书写其他标签，称为标签嵌套
嵌套结构中，外层元素称为父元素，内层元素称为子元素；
多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
平级结构互为兄弟元素

2.HTML语法规范

标签名不区分大小写，建议使用小写
注释语法（快捷键ctrl + /）：

<!-- 此处为注释 -->

三、常用标签介绍

1.基本框架结构介绍

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->

<!doctype html> 

<!-- HTML文档开始的标志 -->

<html> 

   <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->

   <head>

       <!-- 设置网页标题，显示在网页选项卡上方 -->

       <title>网页标题</title>

       <!-- 设置网页字符编码 -->

       <meta charset="utf-8"> 

   </head>

   <!-- 网页主体部分，显示网页主要内容 -->

   <body> 

       网页主体内容

   </body>

</html><!-- 文档结束-->

2.body中常用标签

文本标签
标题标签：自带加粗效果，从h1到h6字体大小逐级递减

 <h1>一级标题</h1>

 <h2>二级标题</h2>

 <h3>三级标题</h3>

 <h4>四级标题</h4>

 <h5>五级标题</h5>

 <h6>六级标题</h6>

段落标签：

 <p>段落文本</p>

普通文本标签：

 <span>行分区标签，用于对特殊文本特殊处理</span>

 <b>加粗标签</b>

 <strong>强调标签，效果同b标签</strong>

 <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>

 <i>斜体标签</i>

 <u>下划线标签</u>

格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

 <br>

水平线标签，在页面中插入一条水平分割线

 <hr>

字符实体：某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写例

 使用 &lt; 在页面中呈现 "<"

 使用 &gt; 在页面中呈现 ">"

 使用 &nbsp; 在页面中呈现一个空格

 使用 &copy; 在页面中呈现版权符号"©"

 使用 &yen; 在页面中呈现人民币符号"￥"

容器标签常用于页面结构划分，结合CSS实现网页布局

   <div id="top">页面顶部区域</div>

   <div id="main">页面主体区域</div>

   <div id="bottom">页面底部区域</div>

图片与超链接标签
图片标签：用于在网页中插入一张图片。
1.属性 src 用于给出图片的URL，本地图片的地址或网页图片地址。
2.属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
3.属性 title 用于设置图片标题，鼠标悬停在图片上时显示
4.属性 alt 用于设置图片加载失败后的提示文本

<img src="" width="" height="" title="" alt="">

 <img src="J60-3799250.png或者网页图片地址" width="200" 
 height="120" title="我老婆" alt="加载错误">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>唯美女生</title>
</head>
<body>
<img src="https://img0.baidu.com/it/u=2474032986,2195436370&fm=26&fmt=auto&gp=0.jpg" width="200" height="420" title="我老婆" alt="加载错误">
</body>
</html>

超链接标签：用户可以点击超链接实现跳转至其他页面

1.属性 href 用于设置目标文件的URL及网址，必填。
2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

<a href="http://www.taobao.com" target="_self">淘宝</a>

<a href="http://www.baidu.com" target="_blank">百度</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>唯美女生</title>
</head>
<body>

<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CE%A8%C3%C0%C5%AE%C9%FA%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0 " target="_blank">
<img src="dlrb.jpeg" width="200" height="420" title="点击一下，更多唯美女生等着你" alt="加载错误">

</a>

</body>
</html>

3.表格标签

列表标签
有序列表（ordered list）
默认使用阿拉伯数字标识每条数据

<ol>

    <li>list item 列表项</li> 

    <li>list item 列表项</li>

    <li>list item 列表项</li>

</ol>

无序列表（unordered list）

默认使用实心圆点标识列表项

 <ul>

    <li>list item 列表项</li> 

    <li>list item 列表项</li>

    <li>list item 列表项</li>

  </ul>

列表嵌套

在已有列表中嵌套添加另一个列表，常见于下拉菜单

<ol>

    <li>

        西游记

        <ul>

            <li>孙悟空</li>

            <li>孙悟空</li>

            <li>孙悟空</li>

        </ul>

    </li>

</ol>

表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

<!-- 创建表格标签 -->

<table>

     <!-- 创建行标签 -->

    <tr>

        <!-- 行中创建单元格以显示数据 -->

        <td>姓名</td>

        <td>年龄</td>

        <td>班级</td>

    </tr>

    <tr>

        <td>迪丽热巴</td>

        <td>20</td>

        <td>002</td>

    </tr>

</table>

行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中

<table border="1px" width="300px" height="300px">

    <thead></thead>

    <tfoot></tfoot>

    <tbody></tbody>

</table>

总结

送给正在学习路上的同学们的一句话，每当你想放弃的时候，想想这句话，要记住，你未来的样子，藏在现在的努力里。