html学习一

最新推荐文章于 2024-05-15 20:43:52 发布

weixin_33704591

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量143

点赞数

文章标签： javascript php 开发工具 ViewUI

原文链接：https://segmentfault.com/a/1190000013061067

版权

简介

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

什么是HTML？

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

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

HTML标签

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

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

HTML文档 = 网页

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

HTML 编辑器

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

sublime text
vscode
Atom

HTML元素

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

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。

<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!">

weixin_33704591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习一

简介<html> <body> <h1>标题</h1> <p>段落</p> </body></html>什么是HTML？HTML 是用来描述网页的一种语言：HTML 指...
复制链接

扫一扫

html学习一

简介

什么是HTML？

HTML标签

HTML文档 = 网页

HTML 编辑器

HTML元素

HTML属性

HTML 元素

HTML 元素

<html>

<head>

<base>

<link>

<meta>

<script>

<style>

<title>

<body>

HTML 标题

HTML 换行符

HTML 水平线

HTML 段落

HTML 引用

计算机代码

HTML 注释

HTML 链接

HTML 图像

HTML 表格

HTML 列表

HTML 块元素

<div> 元素

<span> 元素

HTML 的类和id

HTML 表单

表单元素

<input> 元素

<select> 下拉列表）

<textarea> 元素

<button> 元素

HTML 输入类型

输入类型 text

输入类型 password

输入类型：submit

输入类型：radio

输入类型： checkbox

输入类型： button

“相关推荐”对你有帮助么？