Web前端之HTML

最新推荐文章于 2023-07-07 19:00:15 发布
最新推荐文章于 2023-07-07 19:00:15 发布
阅读量488 收藏 5
点赞数 1
分类专栏： Web前端 文章标签： web前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w252064/article/details/78882278
版权

前端是什么?
前端对于网站来说，通常是指网站的前台部分，除了html和css完成视觉效果以外还要有交互体验，这就需要js去实现了。

那么什么是HTML?
HTML 是用来描述网页的一种超文本标记语言 (Hyper Text Markup Language)它不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)。
而目前最新的 HTML 标准是HTML5，它是专门为承载丰富的 web 内容而设计的，并且无需额外插件， 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建，而且它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML 标签

 1. HTML 标签是由尖括号包围的关键词，比如 <html>
 2. HTML 标签通常是成对出现的，比如 <b> 和 </b>
 3. 标签对中的第一个标签是开始标签，第二个标签是结束标签
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

解释:
<html> 与 </html> 之间的文本用来描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

常用标签:
这里写图片描述

文章标签

标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）
如:
<html>
<!-- 这是一个注释 -->
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

运行效果:
这里写图片描述

段落

段落是通过 <p> 标签定义的。如果您希望在不产生一个新段落的情况下进行换行，请使用 <br /> 标签。
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
你也许会发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及 HTML5中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

文章的预格式标签<pre></pre>

<html>
<body>
    <pre>
                静夜思
            床前明月光，
            疑是地上霜。
                  举头望明月，
                  低头思故乡。
    </pre>
</body>
</html>

标记一个缩写<abbr></abbr>

<html>
<body>
    The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
</body>
</html>
文本标签

超链接标签

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

HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，就相当于目录搜索内容一样，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字，也可以使用 id 属性来替代 name 属性，命名锚同样有效。

<html>

<body>

<p>
<!-- 点击查看Chapter 4就会滚动上来 -->
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

这里写图片描述

基本文本标签

<html>
<body>
    <i>我是斜体文本标签</i>
    <b>我是粗体文本标签</b>
    <strong>我是加强语气的粗体文本标签</strong>
    <sup>我是上标文本</sup>
    <sub>我是下标文本</sub>
</body>
</html>
图像标签
<!DOCTYPE html>
<html>
        <head>
    <meta charset=”UTF-8”>
    <title>我的第一个网页</title>
        </head>
<body>
    <img src="本地图片路径/url链接地址" alt="美女"/>
</body>
</html>
<!-- alt属性是一旦图片没有加载成功，用来替代显示的内容 -->
表格标签
<html>
<body>
    <table border="1">
              <tr>
    <th>Company</th>
    <th>Address</th>
  </tr>

  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
    </table>
</body>
</html>

运行结果:
这里写图片描述

表格的跨行与跨列
语法：
<td colspan="value">跨两列
<td rowspan="value">跨两行

<!-- 跨两列 -->
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

运行结果:
这里写图片描述

表格单元格内的标签嵌套

<table border="1">

            <tr>

                <td>

                    <table>

                        <tr>

                            <td>

                                内层table的td内容1

                            </td>

                            <td>

                                内层table的td内容2

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

            <tr>

                <td>

                    外层table的td内容

                </td>

            </tr>

        </table>

运行结果:
这里写图片描述

利用cellpadding设置单元格的内容与其边框之间的空白

<table border="1" cellpadding="10"></table>

利用cellspacing设置单元格之间的距离

<table border="1" cellspacing="10"></table>

向表格或者单元格添加背景颜色或者背景图片

<table border="1"  style="background:#abcdef;background:url(img/HBuilder.png);"></table>

在表格单元格中排列内容align="left/right/center"

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td align="right">$100</td>
  </tr>
</table>
<!-- <img>标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式-->

<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>

这里写图片描述

列表标签

有序列表

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ol>

运行结果：

  1. 苹果
  2. 香蕉
  3. 橘子

无序列表

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

运行结果：

  • 苹果
  • 香蕉
  • 橘子

自定义列表

 <dl>  
        <dt>helloworld</dt>  
        <dd>每一门新的语言都要打印一个hello world</dd>  
        <dt>helloworld</dt>  
        <dd>每一门新的语言都要打印一个hello world</dd>  
        <dt>helloworld</dt>  
        <dd>每一门新的语言都要打印一个hello world</dd>  
    </dl>

运行结果:


helloworld
每一门新的语言都要打印一个hello world

helloworld
每一门新的语言都要打印一个hello world

helloworld
每一门新的语言都要打印一个hello world

列表嵌套

<ul>  
        <li>宠物</li>  
            <ol>  
                <li>猫</li>  
                <li>狗</li>  
            </ol>  
        <li>人类</li>  
            <ul>  
                <li>英国人</li>  
                <li>中国人</li>  
            </ul>  
        <li>植物</li>  
    </ul>  
    <ol>  
        <li>宠物</li>  
        <ul>  
            <li>猫</li>  
            <li>狗</li>  
        </ul>  
        <li>人类</li>  
        <ol>  
            <li>英国人</li>  
            <li>中国人</li>  
        </ol>  
        <li>植物</li>  
    </ol>

运行结果：
这里写图片描述

表单<form>表单元素</form>

用于收集不同类型用户输入的数据。

表单元素：

<form>
<!--文本框-->
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<!--密码框-->
<input type="password" name="pwd">
<!--单选按钮-->
<input type="radio" name="sex" value="男" checked>男<br/>
<input type="radio" name="sex" value="女">女<br/>
<!--复选框-->
<input type="checkbox" name="food" value="苹果">苹果<br/>
<input type="checkbox" name="food" value="橘子">橘子<br/>
<!--提交按钮-->
<input type="submit"  value="提交">
<!--下拉菜单-->
<select name="cars" >
    <option value="vovol">沃尔沃</option>
    <option value="benz">奔驰</option>
    <option value="bmw">宝马</option>
</select>
<!--文本域-->
<textarea rows="10" cols="30">hello</textarea>
</form>
<!--带下拉边框的表单-->
<form action="">
    <fieldset id="">
        <legend>个人信息</legend>
        <input type="text" size="30"><br />
        <input type="text" size="30"><br />
        <input type="text" size="10">   
    </fieldset>
</form>

form表单中的label标签
<label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
【注意】<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form action="">
        <label for="male">男</label>
        <input type="radio" name="gender" id="male"/><br />
        <label for="female">女</label>
        <input type="radio" name="gender" id="female"/><br />
        <label for="email">输入邮箱地址</label>
        <input type="email"  id="email" placeholder="Enter email"/><br />
    </form>

表单元素属性:
name属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>
</html>

运行结果：
这里写图片描述

这里写图片描述

value属性
一旦赋值，值就会出现在表单中。

readonly属性
规定输入字段为只读，不能修改的。

<input type="text" name="country" 
  value="China" readonly="readonly" />

disabled属性
规定禁用 input 元素，被禁用的 input 元素既不可用，也不可点击。

 <input type="text" name="lname" disabled="disabled" />

【注意】disabled 属性无法与 <input type="hidden"> 一起使用

<form action="demo_form.php">
<!--size属性-->
  Email: <input type="text" name="email" size="35"><br>
<!--maxlength属性-->
  PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
  <input type="submit" value="提交">
</form>
HTML框架

可以在同一个浏览器窗口中显示不止一个页面

<iframe src="http://www.baidu.com" width="200" height="200" frameborder="0"></iframe>
<!--使用iframe显示目录链接页面-->
<iframe src="http://www.baidu.com" name="a"></iframe>
<p><a href="http://www.sina.com" target="a">新浪</a></p>
<!--点击新浪会在iframe设定的窗口中加载新浪页面-->
HTML块级元素与内联元素

大多数 HTML 元素被定义为块级元素或内联元素，“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

HTML <span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。
当与 CSS 一同使用时， <span> 元素可用于为部分文本设置样式属性。

蓝魔之泪LRD
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web︱HTML
梦晨涌京
12-05 161
HTML 简介 超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 实例 <!DOCTYPE html> //声明为HTML5文档，此不区分大小写 <html> //页面根元素 <head> <meta charset="utf-8"> //定义网页编码格式为utf-8。 <title>菜鸟教程(runoob.com)</title> </he
Web 前端——HTML
weixin_51748707的博客
05-18 478
1.web前端简介 web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 2.HTML HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言 ，标记语言是一套标记标签 ，HTML 使用标记标签来描述网页。 3.HTML基本结构 一个.
Web HTML
telescopewang的博客
05-02 97
（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。
web HTML
cpongo881
08-01 224
web前端之HTML标签分类
过客匆匆，恍如烟
11-13 4063
在CSS布局之前，需要知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。 常用的块状元素有： 、、...、、、、、、 、 常用的内联元素有： 、、、、、、、、、、 常用的内联块状元素有： 、 一、块级元素 什么是块级元素？在html中、 、、、 和 就是块
Web_HTML
weixin_42132959的博客
04-16 534
1.什么是HTML？(Hyper Text Markup Language:超文本标记语言) 超文本：功能比普通文本更加强大 标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言) 2.语法和规范？ HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。 HTML文件分为头部分(<head></head>)和体部分(<body>&...
WEB之HTML
weixin_47314449的博客
03-15 817
一、HTML简介二、HTML文档1、创建html文件2、编写html文件内容3、html文档结构 一、HTML简介        HTML是超文本标记语言（Hyper Text Markup Language)。其中，超文本是指连接单个网站或多个网站间的网页的链接。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML、CSS、JavaScript是构建web程序的三剑客。 二、HTML文档 1、创建html文件 我使用.
【Web】HTML
debug...
09-19 684
html超文本标签
Web前端和HTML5什么区别 怎么更好入门前端
qq_43444478的博客
07-06 382
　　Web前端和HTML5什么区别？怎么更好入门前端？提到Web前端开发，人们就会想到HTML5，很多人把前端和HTML5混为一谈，其实这并不全对。不过随着移动互联网的发展以及HTML5技术的成熟，HTML5也成为前端的代表，下面就来给大家分享一下Web前端和HTML5有什么区别。 　　前端和HTML5有什么区别? 　　HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，是前端开发中重要的一部分技术，是前端开发的标准组件。如果把前端开发比作要建设的一
. web/HTML
汝之秀
08-29 183
web概念概述 1.1 概念介绍_软件架构 1.&nbsp;C/S: Client/Server 客户端/服务器端 &nbsp;&nbsp;&nbsp;&nbsp;* 在用户本地有一个客户端程序，在远程有一个服务器端程序 &nbsp;&nbsp;&nbsp;&nbsp;* 如：QQ，迅雷... &nbsp;&nbsp;&nbsp;&nbsp;* 优点： &nbsp;&nbsp;&a
【web html】html 大全
赖德发的博客
09-30 1326
<!DOCTYPE html> <html> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px;
HtmlWeb类
07-11 112
HtmlWeb类 HtmlWeb类是一个从网络上获取一个HTML文档的类，其提供的功能大多是基于完成此需求出发。现在来来HtmlWeb类有哪些方法以及属性。 　　一、属性 bool AutoDetectEncoding { get; set; } 　　　　获取或...
Web学习之HTML
weixin_48268385的博客
05-20 744
文章目录一. 什么是HMTL二. HTML文档结构（1）HTML的基本标签（2）小试一手（3）元素的属性（4）HTML 超链接（5）图片及文件路径 img（6）表格 Table（7）列表 List（8）表单 Form（9）HTML区块和内联元素（10）其它三. 总结四. 参考资料 开发软件：VS Code 安装后，点击界面左侧第五个图标，推荐安装插件：Auto Close Tag（自动补全结束标签）、Auto Rename Tag（自动同步修改前后标签名）、Code Runner（快速运行代码）、Inte
WEB与HTML
m0_67062351的博客
06-13 705
WEB与HTML
Web前端（一）HTML
PizAn的博客
11-09 971
Day1 : 2018/11/10 HTML 创建页面： 注：h从1到6，而字体标签的size从1到7 一些eclipse使用技巧： ctrl+d是删除当前行。 当光标在一行的两端时，按住shift+home/end可以选择当前行 ctrl+shift+左右是选择一个单词，可以连点左右已选择多个。 ctrl + shift + f 格式自动调整 显示图片： &amp;amp;amp;amp;amp;amp;amp;am
WEB基础之：HTML
空气说
08-21 393
一、HTML概述。1，什么是HTML： Hyper Text Markup language :超文本标记语言。标记语言：它是由一个个标记组成的。主要作用是描述数据。在HTML中，它描述的是内容显示格式和样式。 2，特点及书写规范：对于没有主体内容的标签可以自闭和。HTML不能参与程序逻辑。 3，主要组成部分：<html> HTML声明 <head> H
web与HTML简介
Yanfengting的博客
07-28 266
web简史
WEB——html基础知识总结＋案例实战
最新发布
weixin_51525416的博客
07-07 5083
WEB——html基础知识总结＋案例实战
从零开始，学习web前端之HTML基础
热门推荐
喻志强的博客
02-28 1万+
web前端之html基础
Web前端开发详解：从HTML到JavaScript
"本文档包含了百度公司的Web前端笔试面试题目，涵盖了Web前端开发的重要知识点，包括UI设计、HTML/CSS、JavaScript、多媒体处理、服务端通信以及开发工具的使用。" 在当前的互联网环境中，Web前端开发扮演着至关...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值