欢迎访问 生活随笔!

凯发ag旗舰厅登录网址下载

当前位置: 凯发ag旗舰厅登录网址下载 > 前端技术 > html >内容正文

html

一天教会三岁表弟html,你值得拥有 -凯发ag旗舰厅登录网址下载

发布时间:2024/10/14 html 47 豆豆
凯发ag旗舰厅登录网址下载 收集整理的这篇文章主要介绍了 一天教会三岁表弟html,你值得拥有 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

<!doctype html> <html><head><meta charset="utf-8"><title></title></head><body></body> </html>

对于骨架各部分的概述

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

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

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

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

2.1title标签

:双标签,放置网页的标题

2.1meta标签

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

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中定义网页所用编码可以直接用:

2.2其他标签

:标签内写css的代码

2.3script标签

:标签内写javascript代码

2.3link标签

:导入css文件

3.1h标签

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

3.2p标签
:段落标签
3.3两个单标签


:单标签,换行标签


:单标签,水平线标签
3.4文本标签(双标签)
标签名作用
strong或者b粗体标签
i或者em或cite斜体标签
sup上标标签(比如5的平方,那么平方的2就可以使用sup修饰)
sub下标标签(化学方程式用的较多)
s中划线标签
u下划线标签
big大字号标签
small小字号标签
3.5div标签span标签
:可以在网页划分区域,可以用于网页的整体的布局,无特殊含义
:没有特殊含义,代表小的范围,文本级标签,不能放容器级标签,通常和css连用
4.1有序列表
<ol><li></li><li></li><li></li><li></li></ol>

比如我们使用a,b,c进行排序:

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

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

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

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

举个例子

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

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

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

例子:

table标签属性border:代表整个表格边框颜色的深度,0代表没有边框(默认是0),以后边框深度依次加深比如:

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

例子:

6.1form标签

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

form标签属性

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

    是一个单标签

    关于input的type属性

    6.3单行文本框

    input属性值为text

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

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

    例子:

    6.4密码文本框

    input属性值为password

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

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

    input属性值为radio

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

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

    举个例子:

    当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列数
    6.9下拉列表

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

    1.关于select标签:

    他有两种属性:

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


    想要多选需要按住ctrl加鼠标左键

    2.option标签:
    两个属性:

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

    我们使用一下select属性:

    可以看到默认的jquery被选中

    6.10文件上传

    input属性值为file

    6.11综合:
    7.1导入图片

    :单标签

    三个属性:

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

    :实现页面的跳转,有两个属性,第一个是是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>

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

    常见的块元素:

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

    块元素的特点:

    • 块元素独占一行,排斥其他元素(包括块元素和行内元素)与其位于同一行;
    • 块元素内部可以容纳其他块元素和行内元素

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

    行内元素说明
    strong粗体元素
    em斜体元素
    a超链接
    span常用行内元素,结合css定义样式
    9.1特殊符号在网页中的转换
    特殊符号代码
    >>
    <&it;
    &&
    空格 
    9.2注释

    第一种:
    第二种:ctrl /

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

    格式及说明:

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

    我们举个例子:

    总结

    以上是凯发ag旗舰厅登录网址下载为你收集整理的一天教会三岁表弟html,你值得拥有的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

    网站地图