HTML的初步认识

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

虽然我是一个计算机的学生但是不知为什么我只对Wed前端情有独钟,所以我开始了前端的学习,首当其冲接触的就是HTML,什么是HTML,什么是网页都需要我去了解。只有这样我才可以更好的学习我情有独钟的前端。

一、网页是什么?

网页就是一个由各种文字,视频,图片,声音,链接所组成的一个HTML文件!
那HTML又是什么呢?

二、HTML

1.什么是HTML

HTML的全名叫Hyper Text Markup Language翻译过来呢就是超文本标记语言的意思,为什么说他是叫超文本标记语言呢?大家都知道text是文本,但是他只能存储文字,但是他不一样,他不仅可以存储文字还可以存储图片,视频,声音,链接等等……所以他叫做超文本标记语言。

2.HTML的组成

在这里插入图片描述
HTML主要是这几个部分组成,html是根标签,head标签是文档的头部,在head标签中我们必须要设置的标签是title,title又是文档的标题,最后就是body的主体,你的所有内容元素都是放在这里面。

2.1HTML常用标签


标题标签一共有六个从h1~h6,其中h1最大,h6最小,我们在只做网页的时候很多时候都会用到标题标签,是一个非常好用的标签。HTML的常用标签我都放在了图上,希望你可以找到你需要的。

3.HTML文件路劲

相对路径:以引用文件所在位置为参考基础,而建立的目录路径,简单来说就是图片相对于HTML页面的位置。
绝对路径:指的是目录下的绝对位置,直接到达目标位置,通常从盘符开始的路径。

3.1超链接标签

在这里插入图片描述
链接的语法格式:

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

外部链接:链接各个网站以http://开头的就是外部链接。
内部链接:网站内部页面之间的相互链接,直接链接内部页面名称,就是内部链接。
空链接:像<a href="#">XXX</a>这样的就是空链接,通常情况下想做成链接的样式但是又不会使用它的情况下会选择使用空连接。
网络元素链接:网页内的所有元素都可以作为链接对象。
锚点链接:点击我们点击的链接可以快速定位页面中的某个位置,但是在链接文本的href属性中,设置属性值为#名字的形式。同时找到目标位置标签,在里面添加一个id属性=刚才的名字。

4.HTML表格和列表

4.1表格标签

在这里插入图片描述
我认为表格标签的表格属性以及合并单元格是非常重要的,当你需要制作表格用来显示数据的时候它会让你的表格变得格外美观。

4.2列表标签

下面我们来看看我们的列表标签。列表标签无非就是三种:1.无序列表 2.有序列表 3.自定义列表
其中最重要的当选无序列表和自定义列表,无序列表用的最多的地方就是网页的导航栏部分,商品展示部分等等……总之用的地方非常之广泛,而自定义列表用的最多的就是网页最下面的footer部分的那些链接。
在这里插入图片描述

5.HTML表单

什么是表单标签?表单标签就是由表单域、表单控件和提示信息组成。
表单域:表单域是一个包含表单元素的区域,实现用户信息的传递和收集

5.1表单域

在这里插入图片描述
表单域的语法规范如下:

<form action="url地址" method=“提交方式” name="表单域名称">
	各种表单元素控件
</form>

5.2表单控件

表单有许许多多的控件,这次让我们来看看吧!
在这里插入图片描述
name属性:说白了他就是一个名字。
value属性:这个属性是用来规定input的值,你们在网页上看到输入框里那个灰色的字就是他的效果。
Checked属性:是单选和复选的默认属性,规定的是input首次选中的值。
maxlenght属性:设置输入框输入的最大长度。
<label>标签:为input元素定义标注,用于绑定一个表单元素,当点击是浏览器会自动将焦点转到原则对顶的表单元素上。语法如下

<label for="sex"></label>
<input type="radio" name="sec" id="sex"/>

当然表单控件还有两个:
1.select下拉表单:一般是在用户需要从多个选择中选择一个的时候,为了节约用户时间。
语法格式如下:

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</selece>

2.textarea文本域:当用户需要输入大量的信息的时候,就可以选择文本域。

<textarea rows="3" cols="20">
文本内容
</textarea>

row是设置显示多少行
cols是设置每行中可以输入的字符数


总结

以上就是我今天想讲述的内容了,这就是我这一天的收获,仅仅是一天的内容就让我受益匪浅,说明我还有很长的路要走!我仍需努力才能让自己收获更多的东西。期待更好的自己!

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值