day46——特殊符号、标签分类、标签
day46
特殊符号
--空格
>大于号
<小于号
...
找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>难 > < 受 呀</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来做多分类和多标签分类
首先,说下多类分类和多标签分类的区别 多标签分类:一个样本可以属于多个类别(或标签),不同类之间是有关联的,比如一个文本被被划分成“人物”和“体育人物”两个标签.很显然这两个标签不是互斥的,而是有关联 ...
随机推荐
- nodejs之express生成项目[windows平台]
安装nvm,nvm下载地址 用于管理多个版本node,此处可省略! 安装nodejs,nodejs下载地址 淘宝镜像 安装cnpm命令,后面包可以使用cnpm命令安装,此处可省略,如果安装了 ...
- 微信小程序组件化开发框架WePY
wepy-CLI 安装 npm install -g wepy-cli wepy init standard my-project https://github.com/Tencent/wepy 特性 ...
- mysql 设置字段是否可以为null
//不允许为null alter table table1 change id id ) not null; //允许为null alter table table1 change id id ) n ...
- beforeDestroy的使用
beforeDestroy ---实例销毁之前调用 需求是这样的: important:下面截图数据都是测试数据 日期在我点击查询的时候要存储,刷新就读内存,但是我点击其他页面再进来的时候,这个内存要 ...
- hdoj - 1248 寒冰王座
Problem Description 不死族的巫妖王发工资拉,死亡骑士拿到一张N元的钞票(记住,只有一张钞票),为了防止自己在战斗中频繁的死掉,他决定给自己买一些道具,于是他来到了地精商店前.死亡骑 ...
- CodeMirror在线代码编辑器使用
CodeMirror官网地址为:https://codemirror.net/ CodeMirror作为一款代码编辑器,其应用场景主要是在线网站写代码.如现在的leetcode.洛谷.code-vs等 ...
- Compute API 关键概念 详解
Compute API 是 RESTful HTTP 服务,提供管理虚机的能力. 虚机可能有不同的内存大小,CPU数量,硬盘大小,能够在几分钟之内创建出来.和虚机的交互,可以通过Compute API ...
- Web前端开发规范之文件存储位置规范
文件存放位置规范 1 文件夹说明 flash存放flash文件 p_w_picpaths存放图片文件 inc存放include文件 library存放DW库文件 media存放多媒体文件 scri ...
- 【CS224n】Lecture8 Notes
注:这是2017年课程的lecture8.一直都在用RNN,但是对它内部的构造不甚了解,所以这次花了一个下午加一个晚上看了CS224n中关于RNN的推导,不敢说融会贯通,算是比以前清楚多了.做个笔记, ...
- Net core学习系列（六）——Net Core路由
一.概述 路由主要有两个主要功能: 1.将请求的URL与已定义的路由进行匹配,找到该URL对应的处理程序并传入该请求进行处理. 2.根据已定义的路由生成URL 这两个功能看起来这两个是相反的. A.路 ...