HTML基础介绍2

上一篇博客中小编介绍到了标签以及一些原理,此篇是对标签的补充同样是只有HTML。

重点概念:用什么标签不是看是什么格式而是看语义。

上一篇到了超链接以及锚点现在继续介绍:

一、HTML表格

1.无序列表(同样也是组标签)

<ul></ul>包裹,每一项为<li><li>。

ul表格默认小圆点开头,当然也可以用CSS操作当然这里不做介绍,重点是<li>标签是一个容器级标签可以放入很多标签甚至是在一个<li>。(非常常用的一个表格)

2.有序列表(不常用)

<ol>包裹,每一项同样是<li>,与无序列表属性一样只是语义不同。

3.定义列表

由三部分组成:

·定义列表由<dl>包裹。

·<dt>列表中的元素。

·<dd>解释最近的<dt>项,一个<dt>可以有多个<dd>。

二、两种“盒子”

1.div标签(容器级标签)

该标签主要将划定内容分割。

2.span标签(纯文本标签)

可以单独包裹某一个部分

·这样讲这两个盒子可能比较抽象,打个简单的比方来说假如我设置了两个栏目想将他们分割开来做样式这时候就将HTML中这两部分分别用div标签包裹。对于span在举一个实例,123456,这是一串数字这时候想讲56两个数字给一个底色就可以用span包裹然后通过CSS找到这边内容进行底色修改,当然具体是一个怎样的操作之后会说到,现在主要是理解流程。通俗来讲div包裹大元素,span包裹小元素。

div中有一个class属性CSS可以通过div属性名对不同的div进行样式修改——div负责分块,CSS负责样式。

三、表单

所有的表单内容都要写到<form></form>标签之中,该标签中有两个属性,在后面在往前提,action和method。

1.文本框的构建:<input type="text"/>,若在type后在添加一个value属性的话其内容就是文本框中默认文字,在文本框显示时框内就有。

2.密码框:<input type="password"/>,同样也有value属性。

3.单选框:<input type="radio"name="相同选项要在name属性中输入一样的值这样才会互斥"/>选项名称

例:<input type="radio"name="sex"/>男

<input type="radio"name="sex"/>女    //这样就实现了一个男女单选。

默认被选择,就应该添加元素checked="checked"。

4.复选框:同上格式type元素改为"checkbox"。

例:

<p>

     请选择你的爱好:

       <input type="checkbox" name="aihao"/> 睡觉

       <input type="checkbox" name="aihao"/> 吃饭

       <input type="checkbox" name="aihao"/> 足球

       <input type="checkbox" name="aihao"/> 篮球

</p>

当然我们为了代码的规范还是加上了name属性,可无。

5.下拉列表

<select>包裹的组标签

每一项用<option>包裹

6.大框文本框

<textarea cols="30" rows="10"></textarea>

这样的一个格式,cols代表列,row代表行,两项属性控制文本框大小。

7.三种按钮

7.1普通按钮

<input type="button" value="我是一个普通按钮" />

value属性就是按钮上的文字。

7.2提交按钮

<input type="submit" />

不需要写value

提交位置是form中action属性所对应的位置(后端处理)

这边附上一个最常见的

那么这里在提及一下form中另外一个属性method,表示用什么HTTP方法提交(现在无需理解,当然是因为小编也不懂啦所以不说)后面会学到的。

7.3重置按钮

<input type="reset" />

点击会重置所输入内容。

小编在努力学习web中,之后的学习总结也会在博客上一 一陈述希望对大家有所帮助。

猜你喜欢

转载自blog.csdn.net/qq_40833779/article/details/81123601