html 标签学习(续)

时间:2022-08-15 12:17:14

一、基础标签补充

  1、div 标签和span标签 (没有特别的样式,常用)

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

  

    <div>我是div</div>
<div>我是div</div>
<div style="width:100%;height :80px;background-color:red">
<div style="width:50%;height :30px;background-color:yellow"></div>
<div style="width:50%;height :50px;background-color:green"></div>
</div>
<span>我是span<span>我是span</span></span>
<span>我是span</span>
<span>我是span</span>

html 标签学习(续)

  2、img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" 
height="高(宽高两个属性只用一个会自动等比缩放)">

    建议尽量使用本地图片!!!

  3、a标签 (超链接标签)

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

    (1)href属性指定目标网页地址。该地址可以有几种类型:

      • 绝对路径跳转:指向另一个站点(比如:href="http://www.baidu.com") 
      • 相对URL - 指当前站点中确切的路径(href="index.htm")
      • 锚URL:在本页面跳转(#top 、#id) 

   html 标签学习(续)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#sb">跳到sb哪里</a>
<a href="#sb1">跳到sb1哪里</a>
<div style="width: 100%;height: 1600px;background-color: aqua;"></div>
<p id="sb">来这里呀</p> <div style="width: 100%;height: 1000px;background-color: red;"></div>
<a name="sb1">come on!</a>
</body>
</html>

锚的制作示例

     (2)target属性:

      • _blank表示在新标签页中打开目标网页
      • _    self表示在当前标签页中打开目标网页

  3、列表

    (1)无序列表(ul)

<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
(1)disc(实心圆点,默认值)
(2)circle(空心圆圈)
(3)square(实心方块)
(4)none(无样式)

    (2)有序列表(ol)

<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性: start是从数字几开始
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

  4、标题列表

<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

  5、表格(重点)

   表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

   表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

<table border='1'>
<thead> #标题部分
<tr> #一行
<th>序号</th> #一个单元格
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody> #内容部分
<tr> #一行
<td>1</td> #一个单元格
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距 (内边框和内容的距离)
  • cellspacing: 外边距.(内外边框的距离)
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

        html 标签学习(续)

效果:

        html 标签学习(续)

      

二、特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权标识(写公司网站的时候会用到) &copy;
注册(一个圆圈里面有个R) &reg;

简单展示几个:其他的请直接百度搜 html特殊符号对照表

三、标签嵌套原则

  1、块级标签:该标签独占一行;如(p,h1-h6,hr、div)

    内联标签:该标签不独占一行;如(b, i,u,s)

  2、通常情况:

      • 块级元素可以包含内联元素和部分块级元素;
      • 内联元素不能包含块级元素,可以包含某些内联元素  

  注意:p标签比较特殊,嵌套的时候嵌套部分有多少部分数据就显示多少段。

html 标签学习(续) html 标签学习(续)

四、input 标签

  1、用户输入 type="text"

html 标签学习(续)

  2、密码(密文)输入:type="password"

html 标签学习(续)

  3、日期输入:type="data"

html 标签学习(续)

  4、单选框:type="radio"

html 标签学习(续)

  5、复选框:type="checkbox"

html 标签学习(续)

  6、提交:type="submit"

html 标签学习(续)

  7、普通按钮:type ="button"

html 标签学习(续)

  8、重置:type="reset"

html 标签学习(续)

  9、隐藏按钮:type ="hidden"

html 标签学习(续)

  10、文件:type="file"

html 标签学习(续)

  表格汇总:

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表单之后再学这个)

  属性说明:

  1. name:表单提交时的“键”,注意和id的区别
  2. value:表单提交给服务器的时对应项的值
    • type="button", "reset", "submit"时,为按钮上显示的文本年内容
    • type="text","password","hidden"时,为输入框的初始值
    • type="checkbox", "radio", "file",为输入相关联的值
  3. checked:radio和checkbox 设置默认选中值
  4. readonly:text和password设置只读
  5. disabled:设置不可更改,相当于冻结输入窗口

五、form标签(实现用户与服务器交互)

  **记住form表单里面有两个属性:action控制往哪里提交数据、method控制用什么方式提交。

  1、功能:用于向服务器传输数据,从而实现用户与服务器的交互

    表单中可以包含input标签,比如:文本字段、复选框、单选框、提交按钮等

    表单还可以包含textarea、select、fieldset和 label标签。

  2、表单属性大全

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。enctype="multipart/form-data"
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。_blanck

  3、简单的盗号原理

  method=“get"

html 标签学习(续)

  

  method="post"

html 标签学习(续)

  

  时常听到别人号被盗了,被盗的原理应该就是在这里。当你登陆别人的私密连接的时候,你的信息就在别人的服务器接收到了你的账号密码的信息,他们将信息提取出来,就可以登陆你的账号了。私密链接最好不好打开哦。

  4、form书写规范

html 标签学习(续)

  5、文件提交信息

html 标签学习(续)

六、select 标签 (下拉选择框)  

  html 标签学习(续)

<form action="http://127.0.0.1:8001" method="post">
<select name="city" id="">
<option value="1">北京</option>
<option value="2" selected="selected">深圳</option>
<option value="3">上海</option>
</select> <input type="submit" value="提交">
</form>

select 代码

七、labal标签

  1、定义:<label> 标签为 input 元素定义标注(标记)如果不用这个label给input标签一个标记,input会变黄

  2、标签添加的两种方法

    方法一:添加id索引

html 标签学习(续)

    方法二:把需要添加的内容包裹在label标签内部

html 标签学习(续)

八、text多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>

属性说明:

  • name:名称
  • rows:行数  #相当于文本框高度设置
  • cols:列数   #相当于文本框长度设置
  • disabled:禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8001" method="get"> <div>
<!--给id="uname"的元素添加标签-->
<label >用户名: <input type="text" name="username" placeholder="此处账户输入" >
</label>
</div> <div>密码:
<input type="password" name="passwd" >
</div> <div>日期:
<input type="date" name="date">
</div> <div>时间:
<input type="time" name="time">
</div> <div>单选框:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女 </div> <div>复选框: <input type="checkbox" name="hobby" value="1"> 女
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3"> 人妖
<input type="checkbox" name="hobby" value="4"> 大宝剑
</div>
<!--提交-->
<div>请选择城市:</div>
<!--<select name="citys" id="" multiple>-->
<select name="citys" id=""> <option value="1">深圳</option>
<option value="2" selected>北京</option>
<option value="3">上海</option>
</select> <div>
<input type="submit" value="确认">
</div> <!--button:--> <div>
<input type="button" value="普通按钮">
</div> <div>
<input type="reset" value="重置sb">
</div> <div>
<input type="hidden" value="alex is a big boss" >
</div> <div>
<input type="file" >
</div> </form> <!--下拉选择框-->
<form action="http://127.0.0.1:8001" method="post">
<select name="city" id="">
<option value="1">北京</option>
<option value="2" selected="selected">深圳</option>
<option value="3">上海</option>
</select> <div>
<textarea name="textbox" id="tt" cols="30" rows="10"></textarea>
</div>
<div><input type="submit" value="提交"></div> </form> </body>
</html>

input、select、form、textarea演示代码