day46

特殊符号

&nbsp;--空格

&gt;大于号

&lt;小于号

...

找HTML特殊符号

标签分类

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

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

p标签,p标签内部不能包含块级标签和p标签

img标签

img标签  内敛标签

	<img src="1.png" alt="这是个美女..." width="200" height="200" title="美女">

	src属性='图片路径' alt属性='图片加载失败的提示信息'  title='鼠标悬浮提示信息'(title属性不单单是img标签的)

a标签(超链接标签)

内联标签

a标签

没有写href属性,<a>百度</a>

	效果：显示普通文本

有值,但是没有属性:<a href="">百度</a>  #href="" ,		效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面

有属性有值的:<a href="http://www.baidu.com">百度</a>,

	效果：跳转到href属性指定的网址

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

target="_blank"  新的标签页打开,默认是在当前标签页打开

target="_self"   默认的,在当前标签页打开

锚点示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            height: 1000px;

            width: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<!-- 设置锚点 方式1 -->

<a name="top">这是顶部</a>

<!-- 方式2 <div id="top">div顶部</div> -->

<h1>24期皇家赌场</h1>

<!--<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>

列表标签

type对应的值:

无序列表type属性对应的值：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

有序列表type属性对应的值： start属性是从数字几开始

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

有序和无序列表:type属性控制显示样式,start控制起始值

无序列表:

<ul type="none">

    <li>柴嘉欣</li>

    <li>周道镕</li>

    <li>朱凡宇</li>

</ul>

有序列表

<ol type="I" start="2">

    <li>柴嘉欣</li>

    <li>周道镕</li>

    <li>朱凡宇</li>

</ol>

标题列表

<dl>

  <dt>标题1</dt>

  <dd>内容1</dd>

  <dt>标题2</dt>

  <dd>内容1</dd>

  <dd>内容2</dd>

</dl>

table标签(重点)

<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>

常用属性:

border: 表格边框.

cellpadding: 内边距 （内边框和内容的距离）

cellspacing: 外边距.（内外边框的距离）

width: 像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

input标签

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

总结

input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性

input选择框,必须写name属性和value属性

input选择框,name值相同的算是一组选择框**

form表单标签

action属性:值是一个网址,将数据提交到哪个网址去

method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据

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

select下拉框

<select name="" id="" multiple>

    <option value="1">沙河市</option>

    <option value="2">于辛庄市</option>

    <option value="3">回龙观市</option>

</select>

multiple属性,多选,name属性提交数据时的键,option标签中value属性的值需要写,是将来提交数据的真实数据

label标签 (标识一下标签的作用)

<label for="username">用户名:</label>

<!--用户名:-->

<input type="text" id="username">

<label>

    密码 <input type="password">

</label>

　　1.label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容

　　2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

textarea标签,多行文本输入框

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

  默认内容

</textarea>

　　属性说明：

name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符

总体演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>啊啊啊啊</title>

</head>

<body>

<a name="top">这是顶部</a>

<hr>

<p>难&nbsp;&gt;&nbsp;&lt;&nbsp;受&nbsp;呀</p>

<hr>

<!--<div id="top">这是顶部</div>-->

<img src="111.png" alt="图片" width="200" height="200" title="飞车">

<hr>

<p>

    <a href="大奶子.html" target="_blank">大奶子</a>

</p>

<p>

    <a href="小奶子.html">小奶子</a>

</p>

<hr>

<div>

    <ul>

<!--    默认值<ul type="disc">-->

<!--    <ul type="circle">-->

<!--    <ul type="square">-->

<!--    <ul type="none">-->

        <li>柴嘉欣</li>

        <li>周道镕</li>

        <li>朱凡宇</li>

    </ul>

    <ol>

<!--    默认值<ol type="1" start="2">-->

<!--    <ol type="a" start="2">-->

<!--    <ol type="I" start="2">-->

<!--    <ol type="i" start="2">-->

        <li>柴嘉欣</li>

        <li>周道镕</li>

        <li>朱凡宇</li>

    </ol>

    <dl>

        <dt>标题</dt>

        <dd>内容</dd>

    </dl>

</div>

<hr>

<table border="1" cellpadding="10" cellspacing="10" >

    <thead>

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>爱好</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>周道镕</td>

        <td>16</td>

        <td rowspan="3">钱</td>

    </tr>

    <tr>

        <td>柴嘉欣</td>

        <td>18</td>

<!--        <td>篮球</td>-->

    </tr>

    <tr>

        <td colspan="2">朱凡宇</td>

<!--        <td>26</td>-->

<!--        <td>泡妞</td>-->

    </tr>

    </tbody>

</table>

<hr>

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

<!--    get是默认的，post的安全性要比get高-->

    用户名：<input type="text" name="username"><br>

<!--    用户名：<input type="text" name="username" readonly><br> 无法输入-->

<!--    用户名：<input type="text" name="username" disabled><br> 无效-->

    密码：<input type="password" name="password"><br>

    日期：<input type="date" name="date"><br>

    性别：<input type="radio" name="sex" value="1">男

<!--    性别：<input type="radio" name="sex" value="1" checked>男  默认男-->

<!--    性别：<input type="radio" name="sex" value="1" disabled>男 无法选择-->

        <input type="radio" name="sex" value="2">女<br>

    爱好：<input type="checkbox" value="1">打篮球

        <input type="checkbox" value="2">打游戏

        <input type="checkbox" value="3">泡妞

        <input type="checkbox" value="4">钱 <br>

    <input type="submit">

<!--    <input type="submit" value="确定"> 更改提交变为确定-->

    <br>

    <input type="button" value="普通按钮">

    <br>

    <input type="hidden">

<!--    隐藏按钮，分辨用户是否是从本用户提交信息-->

    上传头像：<input type="file"><br>

    <input type="reset">

</form>

<hr>

地区：<select name="access" id="" multiple>

<!--    multiple是把所有选项展开-->

    <option value="1">江西省</option>

    <option value="2" selected>北京市</option>

<!--    selected默认选择-->

    <option value="3">安徽省</option>

</select>

<hr>

<label for="username">用户名：</label>

<input type="text" id="username">

<hr>

<p>

    <label for="add">备注：</label>

</p>

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

<hr>

<a href="#top">回到顶部</a>

</body>

</html>

day46——特殊符号、标签分类、标签的更多相关文章

html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾指令:被<>包 ...
Python-HTML 最强标签分类
编程: 使用(展示)数据存储数据处理数据前端 1. 前端是做什么的? 2. 我们为什么要学前端? 3. 前端都有哪些内容? 1. HTML 2. CSS 3. JavaScript 4.jQue ...
LM-MLC 一种基于完型填空的多标签分类算法
LM-MLC 一种基于完型填空的多标签分类算法 1 前言本文主要介绍本人在全球人工智能技术创新大赛[赛道一]设计的一种基于完型填空(模板)的多标签分类算法:LM-MLC,该算法拟合能力很强能感知标签 ...
scikit-learn一般实例之八:多标签分类
本例模拟一个多标签文档分类问题.数据集基于下面的处理随机生成: 选取标签的数目:泊松(n~Poisson,n_labels) n次,选取类别C:多项式(c~Multinomial,theta) 选取文 ...
CSS.02 -- 样式表及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
前端 HTML 标签分类
三种: 1.块级标签: 独占一行,可设置宽度,高度.如果设置了宽度和高度,则就是当前的宽高.如果宽度和高度没有设置,宽度是父盒子的宽度,高度根据内容填充. 2.行内标签:在一行内显示,不能设置宽度,高 ...
htm基础知识，css的链入以及标签分类。
<!DocTYPE> DOC--Document 文档 TYPE 类型文档类型告诉浏览器这是什么文件单标签: meta 设置 charset 设置编码双标签: 开始 ...
java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
如何用softmax和sigmoid来做多分类和多标签分类
首先,说下多类分类和多标签分类的区别多标签分类:一个样本可以属于多个类别(或标签),不同类之间是有关联的,比如一个文本被被划分成“人物”和“体育人物”两个标签.很显然这两个标签不是互斥的,而是有关联 ...

随机推荐

LOJ P10004 智力大冲浪题解
每日一题 day37 打卡 Analysis 经典的带限期和罚款的单位时间任务调度问题将 val 从大到小排序,优先处理罚款多的,将任务尽量安排在期限之前,并且靠后,如果找不到,则放在最后面 #in ...
[转贴] bu AU3脚本录制工具（软件自动化安装的最简便的方法）
http://www.autoitx.com/thread-15419-1-1.html 1,打开一个.au3的文档或者新建一个.au3的文档,用SciTE编辑; 2,按下ALT+F6,弹出下面的对话 ...
graphql-hooks hooks first 的graphql 客户端
graphql-hooks 是一个hooks first 的graphql 客户端,支持一一些特性首类hooks api 比较小(5.3Kb) gzip 1.8 kb 完整支持ssr (通过grap ...
3D数据采集和重建
3D数据采集和重建是从传感器数据生成三维或时空模型.一般而言,这些技术和理论适用于大多数或所有传感器类型,包括光学,声学,激光扫描,[1]雷达,热学,[2]地震.[3][4] 内容 · ...
【洛谷】P4198 楼房重建（线段树）
传送门分析被线段树按在地上摩擦先把左边转化成斜率,那么这个题就转化成每次修改一个点的值,输出前缀最大值的个数看到标签是线段树,所以还是想想线段树的做法吧既然是线段树,那么就要将区间分成两半 ...
hdoj - 1864 最大报销额
Problem Description 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品 ...
sprintf格式化字符串漏洞(转)
深入解析sprintf格式化字符串漏洞特征: 如何利用: 可以看到, php源码中只对15种类型做了匹配, 其他字符类型都直接break了,php未做任何处理,直接跳过,所以导致了这个问题: 没做字 ...
解读 | 你真正理解什么是Cloud Native吗？
你能做到每周.每天甚至每个钟头向客户发布新特性吗?新加入的开发者能够在他们工作的第一天甚至面试阶段就能部署代码吗?部署新员工的代码后,你能因为确信应用程序运行正常而安然入睡吗?建立快速发布机制,包括支 ...
uniapp - 如何申请阿里云存储
长话短说,简略表述 1. 登录阿里云,选择 oos对象云存储 https://oss.console.aliyun.com/overview 2. 新建“Bucket”,名称是唯一的(建议用公司或者个 ...
Devops（二）：CentOS7（在线）安装Docker
安装环境:Centos7.5 从 2017 年 3 月开始 docker 在原来的基础上分为两个分支版本: Docker CE 和 Docker EE.1)Docker CE 即社区免费版2)Dock ...

day46——特殊符号、标签分类、标签

day46

特殊符号

标签分类

img标签

a标签(超链接标签)

锚点示例:

列表标签

table标签(重点)

input标签

form表单标签

select下拉框

label标签 (标识一下标签的作用)

textarea标签,多行文本输入框

总体演示

day46——特殊符号、标签分类、标签的更多相关文章

随机推荐

热门专题