编程技术

Document

前端-html

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代码时，可以在网页右键-查看源文件/查看页面源代码

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

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

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

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

<strong>同上</strong>

<big>大号文本</big>

<small>小号文本</small>

<i>斜体文本</i>

<em>同上</em>

<sub>下标</sub>   <sup>上标</sup>

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

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

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

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

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

<del>划掉</del> <ins>下划线</ins>

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

<a href="https://www.runoob.com/">页面显示</a>

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

设置图片为链接：

<a href="http://www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

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

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

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

<a href="#C4">查看章节 4</a>

<h2><a id="C4">章节 4</a></h2>

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

 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=======================================

在头部设置，颜色等信息

<style type="text/css">
h1 {color:red;}                  设置h1标题的颜色为红色
p {color:blue;}                  设置p段落为蓝色

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

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

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

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

<link rel="stylesheet" type="text/css" href="styles.css">

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

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

<body style="background-color:yellow;">

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

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

这一行的文字底色

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

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

<h1 style="font-family:verdana;">一个标题</h1>

<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

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

<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> 区块元素：会以新的一行开始或结束

 <h1>, <p>, <ul>, <table>

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

<b>, <td>, <a>, <img>

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

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

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

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

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

<div style="color:#0000FF">              <!-- 这里设置字体为蓝色，在div包裹的内容都将是蓝色 -->
  <p>这是一个在 div 元素中的文本。</p>
</div>

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

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

<!--  只有"蓝色"显示为蓝色，其他字体显示为黑色  -->

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

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

-=========================================================================