标签笔记

html标签介绍

双标签:

　　成对出现，包含开始标签和结束标签。<html></html>

单标签:

　　只有开始标签，没有结束标签，可以手动添加“/”表示闭合。<br>…………<br/>

标签属性:

　　标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示.

　　同一个标签中可以添加若干组标签属性，使用空格间隔。

　　<img src="lily.jpg" width="200px" height="200px">

body常用标签

文本标签：

　　标题标签：自带加粗效果，从h1到h6字体大小逐级递减<h1>一级标题</h1>

　　段落标签：<p>段落文本</p>

　　普通文本标签：

　　　　<span></span>行分区标签，用于对特殊文本特殊处理

　　　　<b></b>加粗标签

　　　　<strong></strong>强调标签，效果同b标签

　　　　<label></label>普通文本标签，常与表单控件结合实现文本与控件的绑定

　　　　<i></i>斜体标签

　　　　<u></u>删除线标签

　　格式标签：<br>    浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

　　水平线标签： <hr>    在页面中插入一条水平分割线

　　字符实体：某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。

　　　　使用 &lt; 在页面中呈现 "<"

　　　　使用 &gt; 在页面中呈现 ">"

　　　　使用 &nbsp; 在页面中呈现一个空格

　　　　使用 &copy; 在页面中呈现版权符号"©"

　　　　使用 &yen; 在页面中呈现人民币符号"￥"

容器标签：

　　常用于页面结构划分，结合CSS实现网页布局

　　<div id="top">页面顶部区域</div>

        <div id="main">页面主体区域</div>

　　<div id="bottom">页面底部区域</div>

图片标签：

　　用于在网页中插入一张图片。

　　1. 属性 src 用于给出图片的URL，必填。

　　2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。

　　3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示

　　<img src="" width="" height="" title="" alt="">

超链接标签：

　　用户可以点击超链接实现跳转至其他页面

　　1. 属性 href 用于设置目标文件的URL，必填。

　　2. 属性 target用于设置目标文件的打开方式，默认("\_self")在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

　　<a href="http://www.taobao.com" target="_self">淘宝</a>    

常用结构标签列表标签：

有序标签 属性名type取值"1"/"a"/"A"/"i"/"I",        

<ol>
    <li>list item 列表项</li> 
    <li>list item 列表项</li>
    <li>list item 列表项</li>
</ol>

无序标签 属性名type取值：circle/square（实心方块）/none(取消项目符号)     

<ul>
    <li>list item 列表项</li> 
    <li>list item 列表项</li>
    <li>list item 列表项</li>
</ul>

列表嵌套

<ul>
    <li>
        <span>城市</span>
        <ol>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ol>
    </li>
</ul>

表格标签：

1.表格由行和单元格组成，常用于直接的数据展示或辅助排版,

<table>
　　　　<!-- 创建行标签 表中一个tr代表一行 -->
　　　　<tr>
　　　　<!-- td行中创建单元格以显示数据 -->
　　　　<td>姓名</td>
　　　　<td>年龄</td>
　　　　<td>班级</td>
　　　　</tr>
　　　　<tr>
　　　　<!-- th表示单元格，自带文本加粗和居中效果 -->
　　　　<th>迪丽热巴</th>
　　　　<th>20</th>
　　　　<th>002</th>
　　　　</tr>
</table>

2.单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

单元格属性：colspan 跨列合并单元格

　　　　　  rowspan 跨行合并单元格

<table border="3px" width="300px" height="300px">
    <tr>
        <!--th表示单元格，自带文本加粗和居中效果-->
        <!--跨列合并 合并3个单元格-->
        <th colspan="3">个人信息</th>
        <!--删除被合并的单元格-->
        <th>年龄</th>
        <th>班级</th>
    </tr>
</table>

表单标签：表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

1.表单使用<form></form>

　　属性名 action 设置数据的提交地址

　　　　　 method 设置数据的提交方式，默认为get方式，可以设置为post

　　　　　 enctype 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data"

    <form action="" method="" enctype="">

        <!--此处为表单控件-->

    </form>

2.表单控件使用:表单控件用于采集用户信息，可设置以下标签属性

    type         设置控件类型

    name         设置控件名称，最终与值一并发送给服务器

    value         设置控件的值

    placeholder 设置输入框中的提示文本

    maxlength     设置输入框中可输入的最大字符数

    checked     设置单选按钮或复选按钮的默认选中

    selected     设置下拉菜单的默认选中

 1  <form action="/login" method="get" enctype="application/x-www-form-urlencoded">
 2     <p>
 3     兴趣爱好:
 4     <!--label for id 实现文本与控件的绑定,
 5     将label标签的属性for取值为对应控件的id值:
 6     1.使用label标签表示文本
 7     2.为相应控件添加id标识
 8     3.label与控件绑定:for属性值与id属性值保持一致-->
 9         <input type="checkbox" name="hobby" value="smoke" checked id="smoke">
10         <label for="smoke">抽烟</label>
11         <input type="checkbox" name="hobby" value="masage" id="masage">
12         <label for="masage">保健</label>
13     </p>
14     <!--下拉菜单-->
15     <select name="city" id="">
16         <!--默认选中第一个option,可以手动设置selected表示选中-->
17         <option value="beijing">北京</option>
18         <option value="shangshai">上海</option>
19         <option value="guangzhou">广州</option>
20         <option value="shenzhen" selected>深圳</option>
21     </select>
22     <!--功能按钮-->
23     <!--文件选择框:涉及二进制数据提交,必须使用post方式,
24     同时设置编码类型为multipart/form-data-->
25     用户头像:<input type="file" name="uimg">
26     <!--1.提交按钮,点击时提交数据到后台,
27     可以设置value属性,表示按钮的显示文本-->
28     <input type="submit" value="注册">
29     <!--2.重置按钮,点击时将表单还原至初始状态-->
30     <input type="reset" value="重填">
31     <!--3.普通按钮,需要自定义点击处理-->
32     <input type="button" value="点击">
33     <!--button标签表示按钮,标签内容即为按钮显示文本
34     书写在form中,相当于submit提交按钮;
35     书写在表单外,相当于普通按钮,需要自定义点击操作-->
36     <button>form内</button>
37 </form>
38 <button>form外</button>
示例

下拉菜单

<select name="city" id="">
    <!--默认选中第一个option,可以手动设置selected表示选中-->
    <option value="beijing">北京</option>
    <option value="shangshai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen" selected>深圳</option>
</select>

功能按钮    input

　　1.文件选择框：用户头像:<input type="file" name="uimg">

　　2.提交按钮<input type="submit" value="注册">

　　3.重置按钮<input type="reset" value="重填">

　　4.普通按钮<input type="button" value="点击">

　　5.勾选按钮<input type="checkbox">

　　6.输入框<input type="text">

label for id 实现文本与控件的绑定,将label标签的属性for取值为对应控件的id值:

　　1.使用label标签表示文本

　　2.为相应控件添加id标识

　　3.label与控件绑定:for属性值与id属性值保持一致-->

　　<input type="checkbox" name="hobby" value="smoke" checked id="smoke">

　　<label for="smoke">抽烟</label>

posted @ 2019-07-23 00:52  maplethefox  阅读(343)  评论(0)  编辑  收藏  举报