前端-html

星辰烈龙

已于 2023-07-02 20:28:26 修改

阅读量132

点赞数

文章标签：前端 html

于 2023-06-28 22:41:37 首次发布

本文链接：https://blog.csdn.net/XingchenLielong/article/details/131444862

版权

html简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

代码介绍：

<!DOCTYPE html> 声明为 HTML5 文档。不区分大小写：Html、html、doctype 、Doctype
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，中文要用utf-8：如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。文章的meta标签设置要一致，不然会出现乱码。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题（h2、3等依次小标题）
<p> 元素定义一个段落

======================================================

用VS运行了一下，安装两个插件，然后右键

========================================================

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>

段落是通过标签 <p> 来定义

<p>这是一个段落。</p>

链接是通过标签 <a> 来定义

<a href="https://www.runoob.com">这是一个链接</a>

图像是通过标签 <img> 来定义 img没有结尾标签，是空标签，只有属性。

<img decoding="async" src="/images/logo.png" width="258" height="39" /> ----通过文件夹位置

src="http://www.runoob.com/images/logo.png" -----通过网页链接添加图片

图像的名称和尺寸是以属性width宽和height高的形式提供的。

<img src="boat.gif" alt="Big Boat"> -----------------如果图片不能显示，就输出alt的文本内容

/如果图片位置错误，html页面会显示一个破碎的图片

align标签可以设置图片的对齐方式（与文字上部对其还是下部，靠左还是靠右）

/在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替

======点击图像内部的链接/映射=====<area> 标签终嵌套在 <map> 标签内部============

在 HTML 中，<area> 标签没有结束标签。

在 XHTML 中，<area> 标签必须正确地关闭。

属性	值	描述
alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords	coordinates	规定区域的坐标。
href	URL	规定区域的目标 URL。
hreflang	language_code	规定目标 URL 的语言。HTML5 中的新属性。
media	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。HTML5 中的新属性。
nohref	value	HTML5 不支持。规定没有相关链接的区域。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。 HTML5 中的新属性。
shape	default rect circle poly	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。
type	MIME_type	规定目标 URL 的 MIME 类型。HTML5 中的新属性。注：MIME = Multipurpose Internet Mail Extensions。

<area>标签支持html的全局属性、事件属性。

===========================================

html的元素语法：

以开始标签起始、以结束标签中止。元素的内容即开始标签与结束标签之间的内容。

有html元素可以有空内容（empty content）空元素以开始标签的结束而结束。

大多数元素有属性

==========html中大小写无所谓，但是推荐使用小写，未来的（X）html版本中强制使用小写

属性

html元素可以设置属性，属性在元素中添加附加信息，一般描述于开始标签。

属性总是以名称/值对的形式出现，比如：name="value"。

例如：<a href="http://www.runoob.com">这是一个链接</a>

属性始终被包括在引号内，一般用双引号，若属性值内本来就有双引号，则属性用单引号。

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

=============标题========================================

浏览器会自动在标题前后添加空行

html标题标签只用于标题。用户可以通过标题快速浏览网页，要用标题呈现文档结构。

<hr> 标签在 HTML 页面中创建水平线。

当想看一个网页的html代码时，可以在网页右键-查看源文件/查看页面源代码

由于html中，显示页面时浏览器会移除代码中的空格和空行，所有的空格或空行都看作一个空格。

<br>标签可以换行（<br />其实是一个空的html元素，没有结束标签）

===============html文本格式显示===============================

<b>这段文本加粗</b>

<pre>这中间的文本怎么写就怎么显示，不会省略空格与回车（格式还是会变化）</pre>

<abbr title="鼠标移动到这个词这里，会显示这些">这个词</abbr>
<acronym title="你是超把狗">另一种方式</acronym>

<p><bdo dir="rtl">文字从右到左显示。</bdo></p>

<p>后面的话加引号<q>这段话</q>前面有引号</p>======》

（用这个方式加的引号，不会选中引号但是会显示，引号也可以直接加（直接加引号可选中）

=====================链接===========================

点击就会跳转设置的网址。页面显示不一定是文字，可以是图片或者其他html元素

设置图片为链接：

border="0" =========设置图片的边框，可以为0（无边框）

width="32" height="32" ==============设置图片的尺寸（宽和高）不会裁剪图片

==================链接本页面的某个地方===============

在页面中点击就会跳转到章节四位置。

target="_top" ========属性：在当前页面跳转网址

若设置的网址内有空格，用%20代替。

===============html代码头部===================

<!DOCTYPE html>
<html>
<head>                                    <!头部开始>
<meta charset="utf-8">                         <!网页编码格式-->
<title>我的 HTML 的第一页</title>   <!title浏览器标题中有这内容（页面不显示）>
<base href="https://www.runoob.com/images/" target="_blank"> 
</head>                                 <!头部结束>


<body>
<img src="logo.png">      <!设置相对地址，会根据base标签中地址而定义为"https://www.runoob.com/images/logo.png">
<a href="https://www.runoob.com">菜鸟教程</a>  <!因为base中设置了target，所以会打开新窗口>
</body>
</html>

其中，title元素：定义了浏览器工具栏的标题、显示在收藏夹中的标题（若被收藏）、显示在搜索引擎结果页面的标题

style元素可以添加样式来渲染html文档，比如颜色。

meta标签通常用于网页的描述、关键词、文件最后的修改时间、作者、和其他元数据

<meta name="description" content="免费 Web & 编程 教程">关键词、描述

<meta name="author" content="Runoob">作者

元数据不显示，但会被浏览器解析。

元数据可用于浏览器显示内容或重新加载页面、搜索引擎关键词、其他web服务

<meta http-equiv="refresh" content="30">     重新加载时间

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">搜索引擎定义关键词

=====================文字样式CSS=======================================

在头部设置，颜色等信息

==================================

<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>

style="text-decoration:none 没有文字装饰 =======这里就是，链接没有下划线了。

=============================

在头部使用，链接外部的CSS文字样式

=============================

定义整个html页面的背景颜色

<h2 style="background-color:red;">这是一个标题</h2>

这一行的文字底色

=========================================

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签

===============================================

<h1 style="text-align:center;">在开始标签处，可以控制这段文字的对齐方式</h1>

=====表格===============================================

table作用是显示表格化的数据。

<table border="1">                   <!-- table是表格标签 border是表格的边框，默认没有边框 -->
  <thead>                          <!-- <thead > 用于定义表格的标题部分，有结束标签 -->
                   <!-- 其实也可以没有thead部分，标题不一定在thead里面，也可以在tbody里面 -->
    <tr>                       <!--  tr是行，几个tr就是几行，有结束标签/tr-->
      <th>列标题1</th>          <!-- th是标题，默认粗体居中 -->
      <th>列标题2</th>            <!--  -->
    </tr>
  </thead>

  <tbody>                        <!--<tbody > 用于定义表格的主体部分，有结束标签  -->
    <tr>
      <td>行1，列1</td>            <!-- td是单元格的数据，一个td就是一个数据 -->
      <td>行1，列2</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
    </tr>
  </tbody>
</table>
 <!-- 表格单元可以有文本、图片、列表、段落、表单、水平线、表格 -->

===============进阶表格==========================================

 <caption>  跟在表格的<table>后边，这段文字为该表格的标题。显示在表格的正上方</caption>

 <td>                                  <!-- 表格单元可以加文字，也可以分段  -->
   <p>这是一个段落</p>                      <!--  -->
   <p>这是另一个段落</p>
  </td>

<th colspan="2">   <!-- 这个标题占用两列 -->
 <th rowspan="2">  <!-- 这个标题占两行 -->

<table border="1" 
cellpadding="10">               <!-- 单元格内部的边矩为10（文字与表格一周的距离） -->

<table border="1" cellspacing="0">           <!-- 表格的间距为0（表格的边） -->

===================列表=================================================

列表有无序列表、有序列表、自定义列表

<!-- 无序列表 -->
<ul>                   <!-- 一个列表的开始标签 -->
    <!-- <ul style="list-style-type:disc"> 即默认实心圆、circle（圆圈）、square实心正方形 -->
  <li>Coffee</li>         <!-- 一个列表元素 -->
  <li>Tea</li>
  <li>Milk</li>
</ul>             <!--  -->

<!-- 有序列表 -->
<ol  start="50">                  <!-- 一个有序列表的开始标签，默认是从序号1开始 -->
  <li>Coffee</li>                    <!-- start="50" 从50开始，第一个是50 -->
  <li>Tea</li>     <!-- 把start换成type="A" 则序号从A开始，可大小写字母，大小写罗马数字I -->
  <li>Milk</li>
</ol>

<!-- 自定义列表 -->
<dl>                                 <!-- 自定义列表的开始标签 -->
  <dt>Coffee</dt>                         <!-- 自定义列表的第一个元素项目 -->
  <dd>- black hot drink</dd>                     <!-- 第一个元素的内容 -->
  <dt>Milk</dt>                             <!-- 自定义列表的第二个元素项目 -->
  <dd>- white cold drink</dd>
</dl>

 <!-- 所有的列表内部都可以套列表、段落、换行符、图片、链接 -->

===================区块============================================

<div> 区块元素：会以新的一行开始或结束

<span> 内联元素：不会以新的一行开始，继续在后边显示

----------------------------------------

<div> 和<span> 没有特定的含义，可以组合其他的元素，达到想要的显示效果。

<div>可以设置它的宽度，高度，边距等样式。<!-- 如果不设置宽度高度，默认包裹住内容 --!>

<span>宽度由包裹的内容而定。

<div><span>可以互相嵌套。

<div style="color:#0000FF"> 
<p>这是一个在 div 元素中的文本。</p>
</div>

----------------------

<p>我有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛

========================网站布局===================================

用代码布局很耗时，不如直接用外部链接CSS文件，还方便维护，网上还有很多CSS的模板。

-==============表单=====================================================

表单是创建一个文本框，收集用户的输入信息。

<form> 标签来创建表单。文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）

<form action="">            <!-- 一个form可以有好几个表单，action是将数据上传到哪里。 -->
Username: <input type="text" name="user"><br>                <!-- 文本域默认20字符 -->
Password: <input type="password" name="password">    <!-- 密码字段不会明文显示 -->

<input type="radio" name="sex" value="male">男<br>  <!--  <input type="radio">是一个单选-->
<input type="radio" name="sex" value="female">女             <!--  -->
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车        <!-- checkbox多选 -->

<select name="cars">                        <!-- 下拉列表 -->
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected >Fiat</option>    <!--在option属性加上selected表示预选这个-->
</select>

<textarea rows="10" cols="30">
我是一个高度为10宽度为30的不限制输入字数的文本框。可以输入回车。
</textarea>

<input type="button" value="按钮">    <!--按钮，value后边是按钮显示内容-->
</form>

<form name="input" action="html_form_action.php" method="get">
    <!-- action定义了数据传输到哪里、method定义了以什么方式传回数据。get传明文、post传隐私 -->
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

===============================进阶表单==================================

<form action="">            <!--  -->
<fieldset>                                        <!-- 带边框的表单 -->
<legend>Personal information:</legend>        <!-- legend是表单的标题（代码在哪在哪显示 -->
Name: <input type="text" size="30"><br>          <!-- size是表单的长度（不是输入的长度） -->
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

<form action="demo-form.php">                <!-- 表单的内容上传到action后面的地址 -->
First name: <input type="text" name="FirstName" value="Mickey"><br>   
         <!-- value里面是默认的输入内容// 上传后的内容传给name为FirstName -->
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">            <!-- 设置一个按钮，用于提交上面两个数据 -->
</form>                <!-- 多选和单选是一样的提交方式 -->

<!-- 下面是一个简单的用表单发送电子邮件代码 -->

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br> <input type="text" name="name" value="your name"><br>
E-mail:<br> <input type="text" name="mail" value="your email"><br>
Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">        <!-- 提交按钮 -->
<input type="reset" value="重置">                <!-- type="reset" 重置表单的内容 -->
</form>

                 <!-- 该下拉表单的选项有标题 -->
  <optgroup label="German Cars">             <!-- label是选项的标题（不可选） -->
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>

type的属性：submit提交表单数据、button点击按钮、reset是重置表单数据。

<option value=""></option> 这段代码是给下拉表单多一个值为空的选项。

在下拉表单中加入这一行代码，默认是空的，选了选项后不能再回来选空。

 <option selected disabled hidden style="display: none" value=""></option>

属性加入这个disabled 表示这个选项已经禁用，会显示但是不可选。

例如： <option value="volvo" disabled>Volvo</option>

label属性是选项显示属性内容，传数据的时候是传后边的内容Saab (Swedish Aeroplane AB)。

<option label="Saab">Saab (Swedish Aeroplane AB)</option>

===================框架==============================================

<!-- 用iframe可以在一个网页里面显示另一个网页的内容 -->
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
    <!-- src里面是链接、、、后面分别是宽度和高度 -->
<!-- 宽度和高度后边有frameborder="1"表示边框，0是没有边框 -->
                                                                            <!--  -->
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<!-- 这段代码可以让name为iframe_a的框架跳转到href="https://www.runoob.com"这个网页，显示的链接是RUNOOB.COM -->

=================颜色===========================================

#000000=rgb（0，0，0）黑色两位为一组，分别对应红、绿、蓝。FF=255.

此外，还有3位十六进制颜色值 #000 一个F相当于rgb的255、六位的FF

==============================脚本======================================

HTML 脚本 | 菜鸟教程 (runoob.com)

=================字符实体================================================

html中，很多字符是用不了的，比如大于号小于号<>、多个空格、这时就要用到字符实体。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷