当前位置：移动技术网 > IT编程>网页制作>CSS > html常用标签学习笔记

html常用标签学习笔记

2018年04月02日 | 移动技术网IT编程 | 我要评论

本文内容：

常见标准属性
p
div
span
h系列
input
label
form
table
textarea
select
a
img
ul
ol
换行、水平线标签
常见标准事件属性

PS：html5新增的几个标签也比较火，后续可能会在其他博文补充。

首发日期：2018-04-01

常见标准属性：

id: id一般来说是唯一的（不唯一是不符合规定的），因为是唯一的，所以可以特定的标识某一个标签。如果需要特定的使用某一个标签，可以定义id
class: 是标签的类名，与id不同的是，class是可以重复的，一般用来用类选择器选择“某一些”标签来定义css样式
style: 定义标签的样式
其他。。

p:

介绍：

p标签用来定义段落，一般会用一片空白来代表段落的结束，而且还会有不同段落之间还有一定间距。
效果：

属性：p标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

<p>一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一
        大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字

</p>

补充：

由于是段落，所以会认为是一起的文本，所以即使被p标签包裹的是多行文本，也会忽略我们进行的换行。

div:

介绍：

有点类似p标签，但没有p标签的自带间隔这类属性；一般用作定义“区块”（这片区块内容是这般这般）

属性：div标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

<div>
            一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一
        大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        </div>

span:

介绍：

有div有点类似，但这是一个行内标签，定义的区块只是行内的一块。

属性:span标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

<span>一段文字</span><span>一段文字</span>

h系列：

介绍：

用来定义标题，每种标题都有固定的文本样式
h1用来定义一级标题
h2用来定义二级标题
h3用来定义三级标题
h4用来定义四级标题
h5用来定义五级标题
h6用来定义六级标题

示例：

        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>

input ：

介绍：

input是一个输入框（文本输入框，选择框，日期选择框，文件选择框等等），input的type属性决定着是什么输入框

type属性：

当type='text'时，是一个明文输入框；
- 示例：
type='password'时，是一个密码输入框；input如果有value属性,则作为输入框的默认值；
- 示例：
type='button'时，是一个按钮，这种按钮主要是负责本地的“按钮事件”
- 示例：
type='submit'时，是一个提交表单的按钮，主要负责向后台提交表单，,它可以提交表单form里面的内容；
- 示例：
```
<input type="submit">
```
type='radio'是一个单选框【name的值相同影响他们不能复选，只能单选】，，如果需要有提示内容，需要在标签后面填写，value只是代表选定之后提交到后台的结果
- 示例：
type='checkbox'是一个复选框，，如果需要有提示内容，需要在标签后面填写，value只是代表选定之后提交到后台的结果
- 示例：

type='data'是一个日期选择框，
- 示例：
```
<input type="date" />
```
type='file',需要form里面有enctype='multi'属性配合才能上传文件。
- 示例：

input的其他常见属性：

value:定义input框的值
- 对于text", "password"，是定义input框的默认值
- 对于"button", "reset", "submit" ，是定义按钮上的显示的文本
- 对于"checkbox", "radio", "image" - 定义与输入相关联的值 (比如radio中点击一个选项代表返回后台的是一个什么值)
name:定义 input 标签的名称，可以用name来指示代表哪个input框，可以帮助后台获取指定input里面的值
- 对于单选框，多个input框的name必须相同，不然无法”单选“
readonly:规定input框是只读的，不可写
checked：勾选选项，与'checkbox'或'radio'配合使用，checked="checked" 代表勾选上input框代表的指定选项

label:

介绍：

label只是一个静态文本,通常用来为input框进行标注。

属性：

for:用于将label绑定到input框，可以使点击label相当于点击对应的input框 for的值应为input框的id

<label for="t1">用户名</label>
<input id="t1" type="text" />
<label for="c1">男</label>
<input id="c1"  type="radio" checked="checked" />

form:

介绍：

定义表单，所有向后台传输的数据都定义在表单中

属性：

method:定义向后台传输数据的形式
action:定义传输数据的方向
target:定义打开提交表单后打开网页的方式
enctype:规定表单数据在发送到服务器之前应该如何编码【传输文件时enctype="multipart/form-data"】

示例：

<form src="login.html" method="post">
            <label for="t2">用户名：</label>
            <input id="t2" type="text" />
            <label for="t3">密码：</label>
            <input id="t3" type="text" />
            <input type="submit" value="提交表单" />
</form>

table:

介绍：

table用来定义表格

子标签：

thead:定义“表头”
- tr: thead中定义行
- th:thead中定义列，实际上也可以在thead外定义，比如有些是垂直表头
tbody:定义"表格体“
- td ：代表列
- tr：代表行

属性：

border ：设置边框的宽度
rowspan ：设置表格的行跨度
colspan：设置表格的列跨度
width:设置整个表格的宽度，但不建议使用，应该由css决定样式

补充：

如果我们没有定义tbody，网页也会默认解析添加上，但不会添加thead
表格默认是没有边框，需要添加
对于没有内容的，又想占据一个表格空间的，可以使用&nbsp

示例：

<table border="2" width="200">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">8班</td>
                    <td>小明</td>
                    <td>男</td>
                </tr>
                <tr>
                    
                    <td>小2</td>
                    <td>男</td>
                </tr>
            </tbody>
</table>

textarea:

介绍：

是一个多行文本输入框

属性：

rows:规定文本区内的可见宽度。
cols:规定文本区内的可见行数。
wrap:设置输入框的换行模式
readonly:规定多行文本框是只读的，不可写的

示例：

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

补充：

默认值：textarea的默认值要定义成标签的内容

select:

介绍：

定义一个下拉选单

子标签：

option ：定义下拉选单
optgroup：定义下拉选单组

属性：

size: 规定下拉列表中可见选项的数目。
multiple：是否允许多选
optgroup的label属性：用于定义下拉选单的组名
option标签的属性
- value：定义选中选项后传到服务器的值
- selected:定义选项是否默认选择,【selected="selected"】

示例：

<select name="cars">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>
        <select name="cars" size="2">
            <optgroup label="文件">
                <option value="1" selected="selected">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </optgroup>
</select>

a:

介绍：

a标签用来定义”锚点“，一般用来”跳转“，可以跳转到其他网页，也可以跳转到源网页的其他位置

属性：

href ：定义超链接，定义跳转的”方向“，为地址的时候会跳转到指定地址；为id时，会跳转到原网页的指定id的标签的位置，为name时，会跳转到原网页的指定name的a标签的位置(都用#来做前缀，下面有示例)
target：定义如何打开超链接，默认是在本标签页中打开
- _blank:代表在新窗口中打开

示例：

        <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
        <a href="#a1">按我下去</a>
        <div > <a name="a2">大段文字</div>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="a1"> 大段文字</div>
        <a href="#a2">按我上去</a>

补充：

还有功能性链接，比如点击后调用本地邮件软件发邮件

img:

介绍：

img标签用来在网页中插入一个图片

属性：

src: 定义图片的源，可以为url，可以为本地地址
alt: 定义如果没有图片的时候，显示的替代文本
border:定义图片的边框

示例：

（下面代码实现需要图片）

<img src="一个错误的路径.gif"  alt="假装有图片"/>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" border="1">

ul:

介绍：

定义无序列表。

子标签：

li：定义列表项

属性：无常用属性或已不建议使用。

示例：

<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>一个嵌套列表
                <ul>
                    <li>4.1.1</li>
                </ul>    
                <ul>
                    <li>4.3.1</li>
                </ul>
            </li>
</ul>

补充：

列表可以嵌套：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

ol:

介绍：

定义有序列表

子标签：

li：定义列表项

属性：

type:定义顺序,A,a ,I，i,1等顺序

示例：

<ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <ol>
                <li>4.1</li>
                <li>4.2</li>
                <li>4.3</li>
            </ol>
            <li>5</li>
</ol>

换行、水平线标签：

br: 换行
hr:定义一条水平线

常见标准事件属性：

onclick: 定义标签被点击事件，值是一个函数，使得点击该标签就调用对应函数。
ondblclick：定义标签被双击事件，值是一个函数，使得双击该标签就调用对应函数。
onfucus: 定义标签获得焦点事件，值是一个函数，使得标签获得焦点事件就调用对应函数。
onblur：定义标签失去焦点事件，值是一个函数，使得标签失去焦点事件就调用对应函数。
其他。。。。

<input type="button" value="button" onclick="alert(555)">

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS实现loading小动画

纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢？... [阅读全文]
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）

单行如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当... [阅读全文]
css counter计数器与content总结

content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于... [阅读全文]
前端学习笔记（6）之css盒模型的细节知识点汇总

css盒模型细节知识点总结只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设... [阅读全文]
前端学习笔记（4）之css背景属性合集

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺... [阅读全文]
PC端页面适配到移动端的问题(自动缩放PC端页面)

有时候在移动端开发页面的时候会发现因为移动端分辨率大导致页面视图被缩放的很小,这个时候就需要适配了话不多说直接贴... [阅读全文]
新版知乎x-zse-86加密破解分析

知乎x-zse-86加密破解新版知乎加密破解仅用于研究和学习使用新版本知乎使用headers中的x-zse-86... [阅读全文]
Flex 使用场景(二）

Flex 就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布... [阅读全文]
css3实现边框圆角内凹效果

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?效... [阅读全文]
【css】利用line-height实现垂直居中

替换元素与非替换元素<body> <div>hello</div> &l... [阅读全文]

网友评论


验证码：

html常用标签学习笔记

2018年04月02日 | 移动技术网IT编程 | 我要评论

本文内容：

常见标准属性：

p:

介绍：

属性：p标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

补充：

div:

介绍：

属性：div标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

span:

介绍：

属性:span标签没有什么特别的属性，主要使用的属性都是通用属性

示例：

h系列：

介绍：

input ：

介绍：

type属性：

input的其他常见属性：

label:

介绍：

属性：

form:

介绍：

属性：

示例：

table:

介绍：

子标签：

属性：

补充：

示例：

textarea:

介绍：

属性：

示例：

补充：

select:

介绍：

子标签：

属性：

示例：

a:

介绍：

属性：

示例：

补充：

img:

介绍：

属性：

示例：

ul:

介绍：

子标签：

属性：无常用属性或已不建议使用。

示例：

补充：

ol:

介绍：

子标签：

属性：

示例：

换行、水平线标签：

常见标准事件属性：

您可能感兴趣的文章:

相关文章:

网友评论