前端02 /HTML标签

前端02 /HTML标签

目录

1.特殊字符

内容 对应代码
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)    
> >
< &lt;
& &amp;
¥ &yen;
版权标识（写公司网站的时候会用到） &copy;
注册（一个圆圈里面有个R） &reg;

2.标签分类

标签嵌套

1.通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
2.p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

1.块级标签（行内标签）

块级标签(行外标签):独占一行,可以包含内联标签和某些块级标签,div,p,h1-h6,hr,form

1.1div标签(块标签)

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

1.2p标签（块标签）

p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

2.内联标签

内联标签(行内标签):不独占一行,不能包含块级标签,只能包含内联标签 b,i,u,s,a,img,select,input,span,textarea

2.1 span标签（行内标签）

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

2.2 img标签（内联标签）

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
<!--src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径-->
src单独发一个请求

2.3 a标签（超链接标签）（内联标签）

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

1.没有写href属性,<a>百度</a>  显示普通文本
2.有属性,但是没有值:<a href="">百度</a>  #href="" ,写了href属性,但是里面没有值,效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面
3.有属性有值的:<a href="http://www.baidu.com">百度</a>,跳转到href属性指定的网址
超链接：
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
URL:
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

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

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"） #学django的时候会用的比较多
锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>
target：
target="_blank"表示在新标签页中打开目标网页
target="_self"默认的、表示在当前标签页中打开目标网页
a标签可以写锚点
<a name="top' 这是顶部 </a>
<div id="top">div顶 部</div>
<a href="#top 回到顶部 </a>
加name的值或者id的值

锚点示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 1000px;
             200px;
            background-color: red;
        }
    </style>
</head>
<body>
<!-- 设置锚点 方式1 -->
<a name="top">这是顶部</a>
<!-- 方式2 <div id="top">div顶部</div> -->
<h1>24期皇家赌场</h1>
mao
<!--<div id="top">这是顶部</div>-->
<img src="1.png" alt="这是个美女..." width="200" height="200" title="美女">

<a href="">百度</a>
http://www.baidu.com
<a href="http://www.jd.com" target="_blank">京东</a>

<div class="c1"></div>

#跳转锚点,写的是a标签name属性对应的值,写法 href='#值'
<a href="#top">回到顶部</a>


</body>
</html>

3.列表标签

3.1 无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

　type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

3.2 有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

　type属性： start是从数字几开始

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.3 标题列表

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

无序列表 ul type=默认实心圆、方块、空心圆、none

有序列表 ol type=默认数字、a、A、I（罗马效果） start=2

标题列表 dl

4.table标签 ***(块级标签)

4.1 整体结构

<table border="1" cellspacing="10" cellpadding="20">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">小白</td>
<!--        <td>18</td>-->
        <td rowspan="3">篮球</td>

    </tr>
    <tr>
        <td>小黑</td>
        <td>18</td>
<!--        <td>篮球</td>-->

    </tr>
    <tr>
        <td>小花</td>
        <td>18</td>
<!--        <td>篮球</td>-->
    </tr>
    </tbody>

</table>

4.2 常用属性

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

标签又可以分为两类：

​ 1、展示给用户看的

​ 2、获取用户输入内容的标签，刚才前面的这些标签都是展示内容用的，

5.form表单 ***（块级标签）

5.1 表单功能

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

5.1 功能

5.2 form表单标签

action属性:值是一个网址,将数据提交到哪个网址去
method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据

注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: button按钮，写在form外的话只是一个普通按钮

5.3 表单属性

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

form示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="http://127.0.0.1:8001">

    <div>
        用户名:<input type="text" name="username">
    </div>
     <div>
        密码:<input type="password" name="pwd">
    </div>
     <div>
        性别:<input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女
    </div>
<!--    <input type="submit">-->
<!--    <button>验证</button>-->
    <input type="reset">
</form>

<span></span>

</body>
</html>

5.3 input标签***

元素会根据不同的 type 属性，变化为多种形态。

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

属性说明：

- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
  - type="button", "reset", "submit"时，为按钮上显示的文本年内容
  - type="text","password","hidden"时，为输入框的初始值
  - type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项，checked='checked' 默认选中（属性值必须是checked，属性名和属性值一样可以简写成checked）
- readonly：text和password设置只读，数据可以提交到后台
- disabled：所有input均适用，标签已经作废，数据不能提交到后台

radio（单选框）通过name设置、
checkbox（多选框）通过name设置成一组

总结：

input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性
input选择框,必须写name属性和value属性
input选择框,name值相同的算是一组选择框**

input示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--用户名(普通文本输入框):<input type="text" name="username" readonly>  &lt;!&ndash; #username:用户输入的内容 -&#45;&#45; get('username') = 用户输入的内容 &ndash;&gt;-->
用户名(普通文本输入框):<input type="text" name="username" disabled>  <!-- #username:用户输入的内容 --- get('username') = 用户输入的内容 -->
<input type="hidden">
密码(密文输入框):<input type="password">
性别(单选):
<input type="radio" name="sex" value="1" checked disabled>男
<input type="radio" name="sex" value="2" checked disabled>女

爱好(多选):
<input type="checkbox" name="hobby" value="1"> 烫头  <!-- hobby:[1,2,3] -->
<input type="checkbox" name="hobby" value="2"> 抽烟
<input type="checkbox" name="hobby" value="3" checked> 喝酒
<input type="checkbox" name="hobby" value="4" checked="checked"> 大宝剑

出生日期:
<input type="date">

<div>
    <input type="submit" value="确定">
</div>

<div>
    上传头像:<input type="file">
</div>

</body>
</html>

6.select下拉框

6.1select 标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

多选框
多选下拉框
<select name= ' hobby' multiple= ' multiple'>
<option value= ' a'>肤白</ option>
<option value='b'>貌美</ option>
<option value='c'>大长腿< /option>
</select> 
提交的数据:
hobby:['a','b','c']

6.2属性说明

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

7.label标签（标识一下标签的作用）（行内标签）

方式一：
<label for="username">用户名:</label>
<!--用户名:-->
<input type="text" id="username">

方式二：
<label>
    密码 <input type="password">
</label>

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

8.textarea标签（行内标签）

8.1多行文本输入框

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

限制字数：
<textarea rows='3' cols=10 maxlength='10'></textarea>

8.2属性说明：

- name：名称
- rows：行数  #相当于文本框高度设置
- cols：列数   #相当于文本框长度设置
- disabled：禁用
- maxlength：显示字符数，例如：maxlength='10'  最多输入十个字符
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liubing8/p/11503673.html