HTML入门基础

清疚 2022-05-21 00:50 351阅读 0赞
  1. HTML基础

1.1什么是标记语言

文本文件:只保留文字内容。不保留文字格式。

Word中:既可以保存文字内容又可以保留文字格式。

比如:在.Txt文件中和在word文件中输入同样的内容,设置同样的格式,全部发到另一台计算机上时,出现了TXT文件只有文字内容没有格式,而word保留了内容和格式。


7070 1

Word文档就是标记语言的一种,而现在要学习的HTML(Hyper Text Markup Language)也是一种标记语言,叫做超文本语言

超文本标记语言:不光可以保存文字信息,还可以保存音频,视频等内容。

在我们浏览网页时,其实是将储存在服务器上的HTML文件下载到本地,再通过浏览器进行解析,从而呈现了网页内容。

2HTML基础结构

1. HTML的基本结构

**

**

**第一个网页


1803班第一次HTML课程

HTML的基本结构包括三大部分:标签:是整个目录的跟节点,包含了两个子节点。 标签:主要设置一些写代码时需要做的设置工作,比如字符集、标题。 标签:文档的主体部分,页面中要呈现的内容都在这里。

# 2.
HTML的基础标签 #

##
3.1标题标签 ## 常用的标题有

————

:用于显示页面的标题:包含了标题的格式、语意信息等内容。**


这是标题1


这是标题2


这是标题3


这是标题4


这是标题5

这是标题6

显示结果:

70 2

3.2段落标签

段落标签:表示页面中的一个段落


静夜思


床前明月光


疑是地上霜


举头望明月


低头思故乡


70 3

3.3链接标签

标签,作用的就是页面跳转,包括页内跳转和页间跳转。

href属性:链接的目标地。

Target属性:控制页面跳转方式,其取值有四个:

blank:在新的页面打开

self:在当前页面打开(默认的打开方式)

top:

parent:


跳转到百度

(2)页内跳转

要给“目的地”设置一个id,在a标签中的href属性里面使用“#….(id…名)”实现页内跳转。

Id属性:具有唯一性,是页面元素中的唯一标识,Id名不能重复。

3.4图片标签

图片标签:在网页中插入图片




图片可以从本地载入,也可以从网页中载入:本地载入时要找到图片的地址,在网页载入时要找到图片的网络地址。

路径:

相对路径:

../:上一级目录

/:下一级目录

.:同级目录,这个“.”可以省略。

绝对路径:网址

3.5列表

无序列表

有序列表

无序列表在html中:

    标签定义一个无序列表

  • 标签定义一个列表项

    Type属性:指定的无序列表的符号,取值有:

    Disc:实心圆(默认属性)

    circle:空心圆

    Square:实心正方形




    • 牛奶

    • 面包

    • 鸡蛋

    • 油条

    • 豆浆


    结果:

    70 4

    有序列表在html中:

      标签定义一个有序列表

      Type属性:指定了列表符号的种类包括:

      1、2、3、4、5…….

      a、b、c、d、e…….

      其他的符号种类(自己去试)

      start属性:指定了列表开始的位置,也就是从第几个开始而不是从几开始。



      1. 牛奶

      2. 鸡蛋

      3. 油条

      4. 面包

      5. 牛奶



      结果:

      70 5

      自定义列表在html中:

      标签定义一个自定义列表

      标签列表的标题

      列表的描述



      中国各省份


      河南

      对河南的描述(此处省略一万字)

      浙江

      对浙江的描述(此处省略一万字)


      结果:

      70 6

      4.表单

      4.1表单

      什么是表单?表单就是收集填写信息后提交到后台服务器

      标签就是定义表单

      Get提交和post提交

      定义 一个密码输入框

      Label的作用:可以对其单独进行样式设置,同for属性可以和某一个 input标签进行关联;

      单选框:

      Checked默认选中

      多选框:

      音乐

      普通按钮

      文件选择框

      选择文件

      下拉列表:

      多文本框

发表评论

表情:
评论列表 (有 0 条评论,351人围观)

还没有评论,来说两句吧...

相关阅读

    相关 html5基础入门

    html5的基本知识小结 之前或多或少也接触过一点html,但是没有系统的去学习,只是照葫芦画瓢的改改拿过来用,现在想从一些基础的在往回来看看,学习学习html5,说不准

    相关 HTML入门基础

    1. HTML基础 1.1什么是标记语言 文本文件:只保留文字内容。不保留文字格式。 Word中:既可以保存文字内容又可以保留文字格式。 比如:在.Txt文件中和在

    相关 HTML(五)CSS入门基础

    一、为什么需要CSS样式表 HTML标签的外观样式比较单一,页面色彩不生动 ,样式修改不方便,仅有HTML是不能做出多姿多彩的网站的,样式表的作用相当于华丽的衣服,它可以