HTML body内常用的标签)(二)

(1)块级标签(行外标签):块级标签单独用页面一快空间,单独占用一行空间可设置宽度和高度

(2)内联标签(行内标签):内联标签不会单独占用一块空间,不能单独占用一行空间无法设置宽度和高度

内联标签
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
块级标签
    <p>段落标签</p>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <br>换行
    <hr>线

(3)特殊字符

空格&nbsp;
>&gt;
<&lt;
&&amp;
&yen;
版权标识符()&copy;
注册(®)&reg;

(4)div标签:div标签是块级标签,通过块级标签可以对块以极快内的元素进行样式的修改与设定

(5)span标签:span标签是内联标签,可进行针对段落的微调与设定

但要注意div与span使用时的嵌套关系,div内可多层嵌套使用div,也可使用span,但是span内不能嵌套span或者div等块级标签

(6)img标签:超链接标签;所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
_blank:表示以新页面打开链接
_self:表示在当前标签页中打开目标网页

(7)列表

​ 无序列表

​ type属性:

​ disc(实心圆点,默认值)

​ circle(空心圆圈)

​ square(实心方块)

​ none(无样式)

​ 有序列表

​ type属性:start是从数字几开始

​ 1数字列表,默认值

​ A 大写字母

​ a 小写字母

​ Ⅰ大写罗马

​ ⅰ小写罗马

无序列表
<ul type="disc">
	<li></li>
</ul>
有序列表
<ol>
	<li></li>
</ol>

标题列表
<dl>
	<dt></dt>
	<dd></dd>
</dl>

(8)表格

​ 表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
​ 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
​ 表格的基本结构:

<table border='1'>
  <thead> #标题部分
      <tr> #一行
        <th></th> #一个单元格,自动加粗
      </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td></td> #一个单元格
  </tr>
  </tbody>
</table

​ 属性:

​ border: 表格边框.

​ cellpadding: 内边距 (内边框和内容的距离)

​ cellspacing: 外边距.(内外边框的距离)

​ width: 像素 百分比.(最好通过css来设置长宽)

​ rowspan: 单元格竖跨多少行

​ colspan: 单元格横跨多少列(即合并单元格)

(9)input标签

type属性表现形式代码
text单行输入文本<input type=text” />
password密码输入框(不显示明文)<input type=”password” />
date日期输入框<input type=”date” />
checkbox复选框<input type=”checkbox” checked=”checked” name=’x’ />
radio单选框<input type=”radio” name=’x’ />
submit提交按钮<input type=”submit” value=”提交” /> #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset重置按钮<input type=”reset” value=”重置” /> #页面不会刷新,将所有输入的内容清空
button普通按钮<input type=”button” value=”普通按钮” />
hidden隐藏输入框<input type=”hidden” />
file文本选择框<input type=”file” /> (等学了form表单之后再学这个)

​ 属性说明:

​ name:表单提交时的“键”,注意和id的区别

​ value:表单提交时对应项的值

​ type=”button”, “reset”, “submit”时,为按钮上显示的文本年内容

​ type=”text”,”password”,”hidden”时,为输入框的初始值

​ type=”checkbox”, “radio”, “file”,为输入相关联的值

​ checked:radio和checkbox默认被选中的项

​ readonly:text和password设置只读

​ disabled:所有input均适用

(10)select标签

<select name="city" id="city">
	<option value="1"></option>
    <option selected="selected" value="2"></option> #默认选中,当属性和值相同时,可以简写一个selected就行了

</select>

属性说明:

​ multiple:布尔属性,设置后为多选下拉框,否则默认单选

​ disabled:禁用

​ selected:默认选中该项

​ value:定义提交时的选项值

(11)label标签

  定义: 标签为 input 元素定义标注(标记)。如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签。

​ 说明:label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容;<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<label for="username">用户名</label>  # 只能是id属性
<input type="text" id="username" name="username">

(12)textarea多行文本

​ 可设置是否允许手动拉伸:resize: none;

<textarea name="memo" id="memo" cols="30" rows="10">
</textarea>

​ 属性说明:

​ name:名称

​ rows:行数 #相当于文本框高度设置

​ cols:列数 #相当于文本框长度设置

​ disabled:禁用

​ maxlength:显示字符数,例如:maxlength=’10’ 最多输入十个字符

(13)form表单

<from action="http://127.0.0.1:8000" method=""></form>
action属性:指定提交路径
method属性:提交方式
form表单会将form表单里面的数据全部提交到指定路径

原创文章,作者:27149,如若转载,请注明出处:http://wpbbw.com/60.html

发表评论

登录后才能评论