html学习一

时间  2019-12-14
标签 html 学习 栏目 HTML 繁體版
原文   原文链接

简介

<html>
    <body>
        <h1>标题</h1>        
        <p>段落</p>
    </body>
</html>

什么是HTML？

HTML 是用来描述网页的一种语言：php

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是语言，而是标记语言
  • HTML 使用标记标签来描述网页

HTML标签

HTML 的标记标签也称标签（HTML tag）css

  • HTML 的标签是用尖括号包围的关键词，<html>
  • HTML 的标签是成对出现的，<body></body>
  • HTML 的标签前一个是开放标签，后一个是关闭标签
  • HTML 标签中无其余内容时，可用 "/" 来做结束，<img src="..." />

HTML文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 也被称为网页
  • web 浏览器读取 HTML 文档并以网页显示他们，而不会显示标签

HTML 编辑器

HTML 文件格式以 .html 为后缀。html

  • sublime text
  • vscode
  • Atom

HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的全部代码。web

  • HTML 元素以开始标签开始，以结束元素结束
  • HTML 元素能够嵌套，<html><body></body></html>
  • HTML 元素没有结束标签通常可使用，但不要忘记结束标签
  • HTML 标签大小写不敏感，但通常都使用小写

HTML属性

HTML 标签能够拥有属性。属性提供了有关 HTML 元素的更多的信息。浏览器

  • 属性老是以名称/值对的形式出现，好比：name="value"。
  • 属性老是在 HTML 元素的开始标签中规定。

HTML / HTML5 的全局属性
HTML全局属性服务器

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的全部代码。
大多数 HTML 元素能够嵌套（能够包含其余 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。编辑器

HTML 元素

<html>

<html> 定义网页的文档，是全部元素的容器布局

<head>

<head> 定义网页的头部信息，它是全部头部元素的容器。<head> 中的元素能够引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各类属性和信息，包括文档的标题、在 Web 中的位置以及和其余文档的关系等。绝大多数文档头部包含的数据都不会真正做为内容显示。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。搜索引擎

<base>

<base> 标签为页面上的全部连接规定默认地址或默认目标。
一般状况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签能够改变这一点。浏览器随后将再也不使用当前文档的 URL，而使用指定的基本 URL 来解析全部的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。url

<link>

<link> 标签订义文档与外部资源的关系,最多见的用途是连接样式表。

<!--连接图标 -->
<link rel="icon" href="..." type="image/x-icon">
<!--连接css -->
<link rel="stylesheet" href="...">

<meta>

<meta> 元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<script>

<script> 定义文档中的JavaScript代码，可用外链和内联两种方式：

<!--内联  -->
<script>
    function test() {
        ...
    }
</script>
<!--外链  -->
<script src="..."></script>

<style>

<style> 文档的内联样式，经过class和id查找元素

<style>
.class {
    ...
}
.id {
    ...
}
</style>

<title>

<title> 网页的标题

<title>网页标题</title>

<body>

<body>定义网页的正文，浏览器中显示的内容都在这里。

<body>
    <h1></h1>
    <p></p>
</body>

HTML 标题

标题（Heading）是经过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。

  • 浏览器会自动地在标题的先后添加空行。
  • 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
  • 搜索引擎使用标题为您的网页的结构和内容编制索引。
  • 由于用户能够经过标题来快速浏览您的网页，因此用标题来呈现文档结构是很重要的。
  • 应该将 h1 用做主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<h1>标题1</h1>
<h2>标题2</h2>
...
<h6>标题6</h6>

HTML 换行符

<br> 是 HTML 的换行符：

<br />

HTML 水平线

<hr /> 标签在 HTML 页面中建立水平线，可用于分隔内容。

<hr />

HTML 段落

段落是经过 <p> 标签订义的。浏览器会自动地在段落的先后添加空行。（<p> 是块级元素）

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 引用

HTML <blockquote> 元素定义被引用的节。浏览器一般会对 <blockquote> 元素进行缩进处理。

<blockquote cite="url">
    网页文档引用
</blockquote>

计算机代码

使用 <pre><code></code></pre> 在网页中显示计算机代码。

<pre><code>
ver person = {
    firstname: "li",
    lastname: "hai",
    age: 24
}    
</code></pre>

HTML 注释

<!-- --> 定义网页的注释信息，该标签中的内容不会被浏览解析

<!-- 这是一段注释 -->
<p>这是一个段落。</p>
<!-- 记得在此处添加信息 -->

HTML 连接

超连接能够是一个字，一个词，或者一组词，也能够是一幅图像，您能够点击这些内容来跳转到新的文档或者当前文档中的某个部分。把鼠标指针移动到网页中的某个连接上时，箭头会变为一只小手。咱们经过使用 <a> 标签在 HTML 中建立连接。
有两种使用 <a> 标签的方式：

  • 经过使用 href 属性 - 建立指向另外一个文档的连接
  • 经过使用 name 属性 - 建立文档内的书签
<a href="#c1">内部跳转</a>
<h1 id="c1">内部跳转到这里</h1>

<a href="http://url">外部跳转</a>

HTML 图像

在 HTML 中，图像由 <img> 标签订义。<img> 是空标签，意思是说，它只包含属性，而且没有闭合标签。
要在页面上显示图像，你须要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="...">

HTML 表格

表格由 <table> 标签来定义。每一个表格均有若干行（由 <tr> 标签订义），每行被分割为若干单元格（由 <td> 标签订义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 列表

HTML 的列表有有序列表<ol>和无序列表<ul>

<!--无序列表 -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<!--有序列表 -->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 块元素

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

内联元素在显示时一般不会以新行开始。
例子：<b>, <td>, <a>, <img>

<div> 元素

HTML <div> 元素是块级元素，它是可用于组合其余 HTML 元素的容器。
<div> 元素没有特定的含义。除此以外，因为它属于块级元素，浏览器会在其先后显示折行。
若是与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另外一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

<span> 元素

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

HTML 的类和id

HTML 的类和id都能区分文档中的元素。当有些不一样

  • 每一个元素能够有多个类，但只能有一个id
  • 不一样元素的类能够相同， 但一个id只能对应一个元素
  • css和JavaScript可使用类和id选择相应的元素，并做相关操做。
<div class="item item1">div</div>
<div class="item item2">div</div>
<div id="div1">div</div>

HTML 表单

用于搜集不一样类型的用户输入

表单元素

<input> 元素

最重要的表单元素是 <input> 元素。
<input> 元素根据不一样的 type 属性，能够变化为多种形态。

<select> 下拉列表）

<select> 元素定义下拉列表：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素

<button> 元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 输入类型

输入类型 text

<input type="text"> 定义供文本输入的单行输入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

输入类型 password

<input type="password"> 定义密码字段：

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

输入类型：submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）一般是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

输入类型：radio

<input type="radio"> 定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

输入类型： checkbox

<input type="checkbox"> 定义复选框。
复选框容许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

输入类型： button

<input type="button> 定义按钮。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程