一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- | ImapBox

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

26 五月
星期二, 26 五月 2020 12:44 Last Updated on 星期二, 26 五月 2020 12:44 0 Comments

目录:
1.HTML基本骨架
2.head内部的可放标签
3.文本所用标签
4.列表标签
5.表格标签
6.表单标签
7.导入图片和超链接
8.行内元素和块元素
9. 特殊符号在网页中的转换和注释
10.框架

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

1. HTML基本骨架

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

对于骨架各部分的概述

骨架部分 概述
<!doctype html> 是一个文档声明，表示这是一个HTML页面，也表示表示网页是按照html5标准编写的
<html> </html> 是最根本的标签表示整个网页，是一个双标签
<head></head> 网页的头部里边是一些网页的配置除了title标签其余都不可见，是一对双标签，标签内容是帮浏览器解析页面的
<meta> 里边是一个网页使用的字符集
<title> </title> 表示网页的标题
<body></body> 用户所能看到的内容区域

有时候我们会在html这个标签里边，看到一条属性：

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">

xmlns是html的第一个属性是一个命名空间，规定不同用户在浏览器中标签语义遵循的统一标准，第二个属性就是lang代表所有的标签语言都是英文

2. head标签内部的可放标签

2.1title标签

<title></title>：双标签，放置网页的标题

2.1meta标签

<meta>：单标签，一般用于定义页面的特殊信息，如页面关键字，页面描述等，提供给搜索引擎，告诉搜索引擎这个页面是做什么的

meta标签有两个属性：
1.name属性：常用取值只有2个：keywords、description,结合content一起用，属性keywords主要是网页的关键字，description则是对网页的描述

<meta  name="keywords" content="陪博主学前端"/> <meta  name="description" content="博主是一个帅哥"/>

2.http-equiv属性：常用属性值Content-Type和refresh，结合content一起用，Content-Type是定义网页所用的编码
refresh是定义网页自动刷新跳转：

<meta  http-equiv="Content-Type" content="text/html;charset=utf-8"/>//定义网页所用编码为utf-8 <meta  http-equiv="refresh" content="6;url=https://www.bilibili.com/"/>//六秒跳转到B站""

注意在HTML5中定义网页所用编码可以直接用：<meta charset=“utf-8”/>

2.2其他标签

<style type="text/css"></style>：标签内写CSS的代码

2.3script标签

<script></script>：标签内写JavaScript代码

2.3link标签

<link type="text/css" rel="stylesheet" href="css/index.css" >：导入css文件

3.文本所用标签

3.1h标签

<h1~6></h1~6>：分别对应六种标题1~6从大到小,h1标题所占权重最高最便利搜索引擎搜索，一个页面一般要有一个h1标签一般将这个标签给logn(能代表整个网页的图标)

3.2p标签

<p></p>：段落标签

3.3两个单标签

<br/>：单标签，换行标签
<hr/>：单标签，水平线标签

3.4文本标签(双标签)
标签名 作用
strong或者b 粗体标签
i或者em或cite 斜体标签
sup 上标标签(比如5的平方，那么平方的2就可以使用sup修饰)
sub 下标标签(化学方程式用的较多)
s 中划线标签
u 下划线标签
big 大字号标签
small 小字号标签
3.5div标签span标签

<div></div>：可以在网页划分区域，可以用于网页的整体的布局，无特殊含义
<span></span>：没有特殊含义，代表小的范围，文本级标签，不能放容器级标签,通常和CSS连用

4. 列表标签

4.1有序列表
<ol> <li></li> <li></li> <li></li> <li></li> </ol>

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

比如我们使用a,b,c进行排序：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

注意：ol标签和li标签需要配合使用，不能单独使用，而且ol的子标签只能是li标签

4.2无序列表
//可用ul>li*4这种快捷键生成如下代码 <ul> <li></li> <li></li> <li></li> <li></li> </ul>

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

注意ul标签里边只能是li标签，文本不能直接放在ul标签内，而是放在标签内

4.3定义列表
<dl>//定义列表 <dt>名词</dt>//定义标题 <dd>描述</dd>//定义解释 .... </dl>

举个例子
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

注意：dt后边可以有多个dd对dt进行解释，dt后边也可以不跟dd也不会影响整体结构

5.表格标签

5.1表格标签
标签 作用
table 表格
tr 代表行
td 代表单元格
caption 表格标题
th 表头单元格
thead 划分表头部分
tbody 划分表身部分
tfoot 表脚

行，单元格等都需要放在table标签里边，其实th和td在本质上都是单元格，但是浏览器会对th进行加粗居中，但是不会对td一居中加粗，后三个标签没有语义就是把表格分为三个部分，让表格的代码更具有可读性

例子：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

table标签属性border：代表整个表格边框颜色的深度，0代表没有边框(默认是0)，以后边框深度依次加深比如：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

5.2合并单元格
标签 作用
rowspan 合并行
colspan 合并列

例子：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

6.表单标签

6.1form标签

我们把表单标签都放在form标签中

form标签属性

属性 作用
name 表单的名字
method 提交方式
action 提交地址
  1. 这里的提交方式指指表单元素使用哪一种http提交方式，method的属性值有两个，一个是get一个是post
  2. 提交地址用于指定表单数据提交到哪一个地址处理
6.2input标签

是一个单标签

关于input的type属性
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

6.3单行文本框

input属性值为text

从上边的介绍，我们可以看到，单行文本框的浏览器效果，我们还可以给单行文本框设置属性，常用的单行文本的属性为：

属性 说明
value 设置单行文本框的默认值，也就是默认情况下单行文本框显示的内容
size 设置单行文本框的长度
maxlength 设置单行文本框最多可以输入的字符数

例子：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

6.4密码文本框

input属性值为password

同样的我们可以为密码文本框设置属性

属性 说明
value 设置密码文本框的默认值，也就是默认情况下密码文本框显示的文字
size 设置密码文本框的长度
maxlength 设置最大输入字符数
6.5单选框

input属性值为radio

我们单选框是必备两个属性的：

属性 作用
name 表示单选框按钮所在的组名
value 表示单选框的可取值

举个例子：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-
当name属性一样的时候，我们只能勾选一个，但是当name属性不一致的时候，那么就都可以勾选，所以name属性的一致性需要特别注意。还有一个缺点，那么就是只要我们不手动勾选，那么系统是不会默认勾选的，所以我们这里还有一个属性可以为我们默认勾选，那就是checked，有两种写法都会默认的勾选女：

 <input  type="radio"  name="a"    value="女"  checked />女  <input  type="radio"  name="a"    value="女" checked="checked"/ >女
6.6复选框

input属性值为checkbox

和单选框一致我们复选框也是三个属性的：

属性 作用
name 表示单选框按钮所在的组名
value 表示单选框的可取值
checked 默认勾选
6.7按钮

input属性值分为三个button，submit，reset,分别表示普通按钮，提交按钮，重置按钮

和value属性搭配使用，value里边的内容就是按钮上的内容

按钮类型 说明
普通按钮 一般都是搭配js操作
提交按钮 给服务器提交数据
重置按钮 重置用户在表单输入的内容(重置按钮只能重置它所在的form标签)
6.8多行文本框

多行文本框不是放在input标签里，他有自己的标签textarea

两个属性：

属性 属性值
row 行数
cols 列数

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

6.9下拉列表

同样的不需要input标签，是靠着select和option两个标签来完成的

1.关于select标签：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-
他有两种属性：

属性 作用
multiple 设置下拉列表可以选择多项(无属性值)
size 设置下拉列表显示几个列表项，取值为整数

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-
想要多选需要按住ctrl加鼠标左键

2.option标签：
两个属性：

属性 作用
selected 是否选中(默认选中)
value 选项值(可以不加，他是和js配合使用)

我们使用一下select属性：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-
可以看到默认的jQuery被选中

6.10文件上传

input属性值为file

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

6.11综合：

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

7.导入图片和超链接

7.1导入图片

<img/>：单标签

三个属性：

属性 作用
src 指定图片路径，可以是相对和绝对路径
alt 用于图片描述，这个描述是给搜索引擎看的，当我们的图片无法显示的时候，页面会显示alt属性的内容
title 也是用于图片描述，不过是描述给用户看的，当我们鼠标移动到图片上的时候会显示title上的文字
7.2超链接

<a herf="链接地址">文本或者图片</a>：实现页面的跳转，有两个属性，第一个是是herf，第二个是target

herf就不用多说了，关于target的属性值：

属性值 作用
_self 在原来窗口打开链接(默认值)
_blank 在新的窗口打开链接

如果我们在一个项目下面有多个网页，同样也可以在这些网页之间实现相互跳转

7.3锚点跳转

这个比如博主写博客，点击博主的目录就会跳到本页面对应的位置，这个就叫做锚点跳转(跳转到本页面的指定位置)

h标签内有一个id属性可以设置一个id值，可以让a标签的属性href等于#+id值,这样就可以实现页面内的跳转

比如：

 <a href="#a1" >1.简介  <a href="#a2" >2.说明 <h1  id="a1">1.简介</h1> <h1  id="a2">2.说明</h1>

8. 行内元素和块元素

1.块元素：独占一行的元素，不管有多少内容，都会独占一行
2.行内元素：只占自身大小，不会占一行

常见的块元素：

块元素 说明
h1~h6 标题元素
p 段落元素
div div无特殊含有，与网页布局有关
hr 水平线
ol 有序列表
ul 无序列表

块元素的特点：

  • 块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
  • 块元素内部可以容纳其他块元素和行内元素

行内元素：
常见行内元素:

行内元素 说明
strong 粗体元素
em 斜体元素
a 超链接
span 常用行内元素，结合css定义样式

9.特殊符号在网页中的转换和注释

9.1特殊符号在网页中的转换
特殊符号 代码
> &gt;
< &It;
& &amp;
空格 &nbsp;
9.2注释

第一种：<!--注释内容-->
第二种：ctrl+/

10.框架

框架的意思是从页面里边再嵌套页面

格式及说明：

<iframe src="链接地址" width="数值" height="数值"></iframe>

我们举个例子：
一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 2
  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 评论 2
  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-
    x

    海报

    扫一扫，海报

  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 9
  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统- 手机看

    到微信朋友圈

    x

    扫一扫，手机阅读

  • 一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-打赏

    打赏

    一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-

    一个有上进心的憨憨

    “你的鼓励将是我创作的最大动力”

    5C币 10C币 20C币 50C币 100C币 200C币

一天教会三岁表弟HTML，你值得拥有javascriptc++职工信息管理系统-



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录