HTML基础知识入门

最新推荐文章于 2020-02-24 13:05:53 发布

faine℃

最新推荐文章于 2020-02-24 13:05:53 发布

阅读量341

点赞数

分类专栏： html 文章标签： html入门标签

本文链接：https://blog.csdn.net/qq_41828282/article/details/89522226

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/ruby_array/article/details/80183697
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML

基础知识

什么是HTML?

HTML是一种告知浏览器如何组织页面的标记语言，它由一系列的元素组成，这些元素可以用来包括不同部分的内容，使其以某种方式呈现或工作，一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如：
可以将一行文字封装成一个段落元素使其来单独呈现

<p>HTML初学者</p>

元素

在这里插入图片描述
元素：开始标签、结束标签和内容想结合，便是一个完整的元素。

嵌套元素

你需要确保元素被正确的嵌套：在上面的例子中我们先打开p元素，然后才打开strong元素，因此必须先将strong元素关闭，然后再去关闭p元素

<p>我的猫咪脾气<strong>爆</strong>:)</p>

元素分类

我们习惯将元素分为三种类型：块级元素、内联元素、内联块元素。他们在页面上的表现各有不同，拥有不同的display属性

元素分类	特性	例子
块级元素	块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。	p
内联元素	出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素a或者强调元素em和 strong	em

空元素

不是所有的元素都含有开始、结束标签，比如img就只有爱是标签。

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

属性

属性包含了元素的额外信息，这些信息不会出现在实际的内容中。
在这里插入图片描述
一个属性必须包含以下内容：

在元素和属性之间有个空格space ，多个属性间也有space
属性后面紧跟着一个“=”；
有一个属性值，有一对" "括起来‘

常见属性含义

属性	含义	例子
href	申明超链接的web地址	href="https://www.mozilla.org/
title	超链接申明的额外信息，比如你将链接那个页面，当鼠标悬浮时，将出现一个工具提示。	title=“The Mozilla homepage”。
target	用于显示链接的浏览上下文	target="_blank"将在新标签页中显示链接。

布尔属性

布尔属性是控制元素的某一个状态，是一中比较特别的属性，在HTML中，只要我们设置了这个属性，不管它的值是多少，或者只有属性名，它都认为其值是true，大坑

布尔属性	用法
checked	redio，checkout可以在图形上表现出勾选的效果 ,勾选上，其name和value就能提交
selected	optioin属性，一旦勾选上，就出现高亮状态，并将name和value就能提交
readonly	用于输入性控件，让用户只能看，不能修改
disabled	让表单元素蒙上一个灰白的色调，用户无法操作它，也不能提交
multiple	让下拉框变成多选形式，可以按住shift进行多选

HTML基本结构

<!DOCTYPE html>          <!--申明文档类型-->
<html>					 <!--包含了整个页面，是一个根目录-->
  <head>				 <!--是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容-->
    <meta charset="utf-8">  
    <title>我的测试站点</title>		<!--页面标题，出现在浏览器标签上-->
  </head>
  <body>				 <!--页面内容-->
    <p>这是我的页面</p>
  </body>
</html>

特殊字符

原义字符	等价字符引用
<	&lt
>	&gt
"	&quot
’	&apos
&	&amp
（空格）	&nbsp

head元素

元素	作用
title	表示页面的标题
meta	可以包含多种信息，类似于一个页面的配置参数
link	引用文件，可以引用css文件，或为页面的标题增加图标
style	在style标签中可以书写页面的css样式，这种书写css的方式被称为内联样式表
script	可以引用js文件，或在script中书写js代码

元元素:<meta>元素

类型	作用
< meta charest=“utf-8”>	制定你的文档中字符的编码格式
< meta name=“author” >	指定了meta元素类型，说明该元素包含了什么类型信息，就是联系谁
meta content=“hello”	实际元元素内容

HTML文字基础

学习目的：学习如何用标记（段落，标题，列表、强调、引用）来建立基础的文本结构和内容

常见内联元素

内联元素	含义
a	瞄点，表示一段链接
span	没有语义。想要对它用CSS（或者JS）时，您可以用它包裹内容
strong	文字加粗，强调
em	文字斜体
u	文字增加下划线
img	图片
input	输出框
sub	下标
sup	上标
code	计算机代码(在引用源码的时候需要)
textarea	多行文本输入框

常见的块级元素

块级元素	含义
h1,h2,h3,h4,h5,h6	标题
p	段落
table	表格
ul	无序排列列表，常和li标签一起用
ol	有序排列列表，常和li标签一起用
hr	水平分割线
form	交互表单
div	常用块级容易，也是css layout的主要标签
address	用于标记联系方式
time	标记时间和日期

建立超链接

URL：统一资源定位器，是一个定义了在网络上位置的一个文本字符串；通过url，我们可以访问网络上的页面、资源和文件。URL通过路径(path)来查找文件。
绝对路径和相对路径。

<!--其中href属性包含你希望链接指向的地址，title属性包含关于链接的补充信息-->
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.
</p>

块级链接

你可以将一些内容转换为链接，甚至是块级元素，如下，将一个图像转换成一个链接，只需要将图片放到<a>和</a>之间；

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

属性

属性	描述
href	链接的目标 URL
target	在何处打开目标 URL。仅在 href 属性存在时使用。_blank是在新标签中打开；_parent；_self；_top

锚点

常见的锚点就是回到顶部，具体实现方法如下：

<h2 id="Mailing_address">Mailing address</h2>
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
<!--当点击mailing address时，会跳转到contacts.html中id="Miling_address"行；-->

方式一：（本页面）

 <a href="#值">文字</a>
  需要跳转到的地方打一个标记<a name= "值">文字</a>

方式二：（跨页面）

 <a href="需要跳转页面#值">文字</a>
  需要跳转到的跨页面地方打一个标记<a name="值">文字</a>

电子邮箱链接

使用<a>元素和mailto：URL的方案，如下：

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

注意：每个字段的值必须是URL编码的，其中主题(subject)、抄送(cc)和主体(body)

引用

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用&ltblockquote>元素包裹起来表示，并且在cite属性里用URL来指向引用的资源。例如，下面的例子就是引用的MDN的<blockquote>元素页面：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

行内引用

行内元素用同样的方式工作，除了使用<q>元素。

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

描述列表

自定义列表

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

无序列表

<ul>
	<li>	无序列表1 </li>
	<li>	无序列表2 </li>
</ul>

有序列表

<ol>
	<li> 有序列表1</li>
	<li> 有序列表2</li>

缩略语

另一个你在web上看到的相当常见的元素是——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中），看看下面例子：

源：<p>我们使用 <abbr title=“超文本标记语言（Hypertext Markup Language）”>HTML</abbr> 来组织网页文档。</p>
效果：我们使用 HTML 来组织网页文档。

文档和网站架构

表格

<capture>是为表格添加一个标题
我们可以只定义一次，在 <col> 元素中。<col> 元素被规定包含在 <colgroup> 容器中，而<colgroup>就在 <table> 标签的下方。
colspan和rowspan分别是合并纵向单元格和横向单元格
th是标题，td是内容，
style="background-color:yellow"是设置背景颜色

表格属性	含义	举例
height	高度	<table height=“300”>
width	宽度	<table width=“300”>
border	边框	<table border=“1”>
cellspacing	边框之间的距离	<table cellspaceing=“0”>
align	表格放置位置	<table align=“center”>

<table border="1">     
				<!-- caption是表示表格的标题-->
				<caption>表格</caption>    									
                <colgroup>							
                    <col>
                  <col style="background-color: yellow">
                  <col>
                </colgroup>
                <!--thead之内的内容是表头-->
                <thead>
	                <tr>
	                  <th style="background-color:green">Data 1</th>
	                  <th>Data 2</th>
	                  <th>Data 3</th>
	                </tr>
	           </thead>
	           <!-- thead如果没加，table中的所有内容都是tbody-->
	           <tbody>
	           	<tr>
	           	  <!-- rowspan=“2”表示将2个行单元格合并-->
                  <td rowspan="2">Calcutta</td>
                  <td>aaaaa</td>
                  <td>bbbbb</td>
                </tr>
                <tr>
                  <td>Orange</td>
                  <td>Jazz</td>
                </tr>
                <tr>
                    <td>ccccc</td>
                    <!-- colspan表示合并列单元格-->
                    <td colspan="2">ddddd</td>
                </tr>
	           </tbody>
                
              </table>

效果图

表单

HTML表单是什么？

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。他们允许用户将数据发送到web站点。

form元素

form是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式；它的属性都可选，但至少的有action和method属性。
常用form属性即作用：

属性	作用
name	表单的名称
method	发送数据时使用的http请求，可选POST，GET
action	只想提交数据到那个网址，可以是绝对路径还是相对路径，不填是发送到本页面

label

label用于为单个表单元素定义标签，注意在所有<label>元素上使用for属性

<label for="name">Name:</label> 
<input type="text" id="name" name="user_name">

表单元素通用属性：

属性	作用
name	表单的名称，通常情况下，表单元素必须用name属性，告诉服务器该数据的名称
value	初始值
autofocus	页面加载完成后自动选中改元素，默认是false
disabled	表单元素处于禁止状态，不能编辑

input（单行文本域）

input元素中，最重要的是type属性，他可以从根本上改变元素；

可以设置readonly属性，使得用户无法修改内容
可以设置palceholder属性，用来描述文本域内需要输入的内容
可以设置size属性，规定最大的内容字符数
根据浏览器的支持，部分文本域可以获得默认的拼写检查
输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符

type	作用	举例	备注
text	最简单的文本域	<input type=“text” id=“name” name=“user_name”>
password	密码	<input type=“email” id=“mail” name=“user_mail”>
email	浏览器带有email格式验证	<input type=“email” id=“mail” name=“user_mail”>
search	用于搜索	<input type=“search” id=“search” name=“search”>
url	浏览器带有url验证	<input type=“url” id=“url” name=“url”>
tel	用于输入电话号码	<input type=“tel” id=“tel” name=“tel”>
radio	单选框	<input type=“radio” name=“sex”>男 <input type=“radio” name=“sex”> 女	name属性的值相同就只能单选
checkbox	复选框	<input type=“checkbox”>美女 <input type=“checkbox”>编程	可以同时选择多个
	按钮	<input type=“button” value=“搜索”> <input type=“submit” value=“注册”> <input type=“reset” value=“重置”>
file	选择文件	<input type=“file”>

textarea(多行文本域)

属性	作用
cols	控制文本域的列数，即宽度，默认为20
rows	控制文本域的可见文本行数
wrap	表示控件是如何包装文本的，可能的值：soft，hard

select（下拉菜单）

<select name="" id="">
	<option value="">请选择你所在城市</option>
	<option value="">南京</option>
	<option value="" selected="selected">上海</option>
	<option value="">杭州</option>
</select>

faine℃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识入门

HTML基础基础知识什么是HTML?元素嵌套元素元素分类空元素属性常见属性含义布尔属性HTML基本结构特殊字符head元素元元素:元素合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章U...
复制链接

扫一扫