HTML基础

发表于 2023-03-20 更新于 2023-04-20 分类于 Learn Disqus：本文字数： 2.1k 阅读时长 ≈ 8 分钟

HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言。

标记语言是由标签构成的语言。<标签名称>例如html,xml;标记语言不是编程语言。

HTML运行在浏览器上,由浏览器来解析

标签的内部是可以定义属性的,属性由键值对构成,值需要用双引号括起来,多个属性用空格隔开

<标签名称属性名1=”属性值” 属性2=”属性值”></标签名称>

<p id=”p1” name=”p1”> </p>

HTML文档的基本结构

HTML文档也叫web页面。

基本结构

<!DOCTYPE html>

<html>

<!-- html,根元素,围堵标签-->

<head>

<!--
head,头元素:
    作用:
    1.用于指定HTML文章中的一些元数据,例如元数据 meta:定义页面的编码格式title:定义页面的标题
    2.引入外部的资源的文件
-->

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!--

body,主体: 浏览器显示内容都将在这里编写

格式化代码的快捷键: ctrl+shift++f(英文状态下使用)

-->

</body>

</html>

HTML中常用标签

1.<h1></h1> ....<h6></h6> 分别是一级标题到六级标题。

2.<h2></h2>:段落标签一般用在正文。

3.</br>:一般用在段落中强制换行。

4.<hr/>:一般用来分隔内容。(color和size可以设置分割线的颜色和大小)
<span>内容</span>：一般在大段落中为了突出部分内容使用的标签;很少独立使用,一般嵌套在其他标签中使用。

5.< img src=” ” title=”” width=”px / %” height=”px / %” >:图片标签

常用属性:

title: 
    作用1:鼠标悬浮在图片上的时候显示的文字。
    作用2:当图片因为各种原因无法正常显示的时候,应该显示图片的位置显示title中的文字。
src:
    指定图片的路径路径的分类:相对路径(表示与当前文件同级的文件夹下的图片 推荐使用)  绝对路径(一般以盘符开头 不推荐使用)

alt与title作用相同,但是浏览器不支持该属性,所以我们一般使用title属性

width和height:高度和宽度,设置之后图片可能会失真。

6.有序和无序列表

<ul>    
<li>12345</li>        
<li>上山打老虎</li>   
</ul>

<ol>    
<li>老虎没打着</li>   
<li>打着个小松鼠</li>   
</ol>

ul-li表示无序列表 li标签可以多个

ol-li表示有序列表,与无序列表功能一样只是样式不同。

7.dl-dt-dd:定义描述标签,一般用在图文混编的场合

     dl:只能盛放dt和dd标签,不推荐放其他内容

     dt:一般用来盛放图片或者标题

     dd:一般用来补充对dt的描述说明

8.标签分类 :

    html标签可以分为块状元素和行集元素两大类

    块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素

    行集元素:一般都是语义级别的基本元素,一般只能容乃文本或者掐腰行内元素

    区分方法:是否独占一行

块状元素和行内元素的区别：

1.块级元素会独占一行,其宽度自动填满父元素宽度;
 行内元素会排列到同一行里,其宽度随元素的内容变化而变化

2.块级元素可以设置宽高;行内元素设置宽高无效

3.块级元素可以设置margin,padding属性;行内元素的水平方向的padding会有边距效果,但是竖直方向的padding没有效果

超链接

超链接标签一般有两个作用:1.用来实现页面之间的跳转 2.实现锚链接的功能

1.页面键的跳转<a href= ” ” target=” ”>内容

a:超链接,作用:跳转到其他资源

属性:href=”目标资源路径” //路径推荐相对路径

 target=”打开资源的位置” 默认值:_self --在当前页面打开

                              _blank--在新的页面打开资源

2.锚链接

当一个页面长度超过一个屏的时候,想迅速跳转到制定的位置,例如大家浏览网页的时候,滑动超过一屏的时候,右下角会有返回顶部连接,这个就是用锚链接来实现的.这个定位可以实现本页间的锚链接也可以实现不同页面的锚链接.

表格标签

规则表格: table定义表格.

       常用属性:    height:高度 width:宽度

                   border:边框

                   cellpadding:内容与单元格之间的距离

                   cellspacing:单元格和单元格之间的距离

<table border=” ” cellpadding=” ” cellsacing=” ” width=” ” height=” ”>

tr:定义行常用属性:

    align:文本水平方向上的对齐方式

    有三个数值: 默认left-左对齐 center-居中对齐 right-右对齐

th和td标签都用来定义单元格,

th:一般用来定义表头单元格,即做标题那一行中的单元格

td:一般用来定义非表头单元格,即除了标题正文内容的单元格

两种方法没有严格限制

常用属性: valign:文本垂直方向上的对齐方式,top-顶部对齐 bottom-底部对齐 middle-居中对齐

不规则–跨行跨列

colspan=” 3” : 意思是它和合并包括自身在行内的三列单元,所有本行后面的两个单元格要被它占用,所有要删除后面两个单元格

rowspan=”3”: 意思是它要和包括自身在内的本列的三行单元格,所有本列后面两行的同样位置的单元格的位置要被它占用,所有要删除后面两行的同位置单元格

表单

概念:用于采集用户输入的数据,用于和服务器进行交互.

form：用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围

常用属性: action:指定提交的数据URL

     method:指定提交方式,一共7种,以下俩种比较常用

             get:

                1.请求参数会在地址栏中显示.会封装到请求中.

                2.请求参数大小是有限制的

                3.不太安全

             post:

                1.请求参数不会在地址栏中显示.会封装到请求中.

                2.请求参数大小是没有限制的

                3.较为安全

     enctype:表中有上传的文件的时候必备属性,且取值为multipart/form-data

1	<form action=” .html” method=”get” enctype=”multipart/form-data”></form>

常用表单元素

1.id:元素的唯一表示,不重复

2.name:表单项元素的名称,很重要:提交数据到服务器之后,服务器获取数据通过该名称

3.value:表单项元素的值,服务器获取数据通过name获取到的就是value

4.type:表示表单元素的呈现形式

5.class:表示样式名称

6.readonly:表示只读,用户只能看不能改

7.disabled:表示禁用,该元素不能改而且背景是灰色

8.required:表示用户必须填写此内容,如没有填写在提交表单时会给错误提示

一.文本框:<input type=”text” />

二.密码框:<input type=”password” />

三.单元按钮:<input type=”radio” name=”” />:name相同是一组,同组按钮互斥

四.复选框:<input type=”checkbox” />:name同组可以选择多个

五.文件件域:<input type=”file” /> :multip表示可以上传多个文件

六.日期-html5的新特性：type=”data”：表示年月日

                   type=”datatime-local”:表示年月日时分秒

七:隐藏域:<input type=”hidden”>:页面看不到任何效果

     作用:程序员需要的值

八.下拉列表框:<select name=””> <option> 内容</option> </select>:

option:select中的所有选项,其中value表示下拉列表中被选中项对应的值

  其中selected表示默认选中

九.文本域:<textarea rows=”” cols=” ” readonly=”readonly” disabled=”disabled”></textarea>

cols:指定行数,每一行有多少个字符

rows:默认多少行

readonly:表示只读内容不可修改

disabled:表示不可用,样式呈现灰色

十一．按钮

1.type=”submit”:提交按钮,提交到form的指定路径

2.type=”image”:等价于提交按钮,只是没有value值,多了src=”提交按钮图片”

3.type=”reset”:清空表单中的所有用户输入,回到默认原始状态

4.type=”button”:普通按钮,没有任何功能,有按钮的长相