标签语法

　标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

HTML常用标签

head内常用标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

body基本标签

不加标签的纯文字也是可以在body中写的

<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> #就是单独一个水平线

特殊符号

&nbsp;--空格

&gt;大于号

&lt;小于号

...

找HTML特殊符号

标签分类

#块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签

div,p,h1-h6,hr,form

#内连标签(行内标签):不独占一行,不能包含块级标签,只能包含内敛标签

b,i,u,s,a,img,select,input,span,textarea

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

img标签和a标签

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="" ,写了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 id="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标签id属性对应的值,写法 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>

</ul>

有序列表

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

       <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" />
password 密码输入框（不显示明文）
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮 #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset 重置按钮 #页面不会刷新，将所有输入的内容清空
button 普通按钮
hidden 隐藏输入框
file 文本选择框 （等学了form表单之后再学这个）
readonly 只读模式

readonly:对text和password设置只读模式

checked：radio和checkbox默认被选中的项

总结

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

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

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


<div>

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

    密码:<input type="password" name="password">  <!-- type="password" 是密文格式不可见 -->

    <p>

        <input type=submit>

    </p>

</div>

form表单标签

表单属性：

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

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

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

from表单的实际应用：

<form action="http://127.0.0.1:8080"> <!-- action中写的是接收端的ip和端口号 -->

    <h2>用户信息表</h2>

    姓名:<input type="text" name="username">

    年龄:<input type=date>

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

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

</div>

<div>

    籍贯:<input type="text" name="native_place">

    爱好:

        <input type=checkbox name="checkbox" value="1">抽烟

        <input type=checkbox name="checkbox" value="2">喝酒

        <input type=checkbox name="checkbox" value="3">喝酒烫头

</div>

<div>

    照片:<input type=file >

</div>

    <div>

        <input type=submit>

    </div>

</form>

select下拉框

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

    <option value="1">北京</option>

    <option value="2">天津</option>

    <option value="3">上海</option>

</select>

multiple:属性,多选,

name:属性提交数据时的键,

option:标签中

value:属性的值需要写,是将来提交数据的真实数据

disabled：禁用

selected：默认选中该项

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

　定义： 标签为 input 元素定义标注（标记）。

第一种写法：

<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：禁用

html简单基础的更多相关文章

  1. 2.1实现简单基础的vector

    2.1实现简单基础的vector 1.设计API 我们参考下C++ <std> 库中的vector, vector中的api很多,所以我们把里面用的频率很高的函数实现; 1.1 new&a ...

  2. java：Spring框架1（基本配置，简单基础代码模拟实现，spring注入（DI））

    1.基本配置: 步骤一:新建项目并添加spring依赖的jar文件和commons-logging.xx.jar: 步骤二:编写实体类,DAO及其实现类,Service及其实现类; 步骤三:在src下 ...

  3. java学习之路--简单基础的面试题

    1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注 ...

  4. 你所要掌握的最简单基础的React渲染优化

    一.React的渲染机制 要掌握一两项React-render优化的方法不难,但是非常重要.无论是在实际项目中的一个小细节,还是迎合'面试官'的口味 1.1 触发Render 我们知道React要更新 ...

  5. java 学习第一篇简单基础

    Java基础 Java Java 和C#有着极为相似的语法. 和C#都是面向对象的高级程序语言. JAVA是一个开源,公开的语言,有着极其丰富的开源库和其他资源. JAVA分类 JAVA分SE EE ...

  6. ADB简单基础命令

    1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...

  7. java IO文件操作简单基础入门例子，IO流其实没那么难

    IO是JAVASE中非常重要的一块,是面向对象的完美体现,深入学习IO,你将可以领略到很多面向对象的思想.今天整理了一份适合初学者学习的简单例子,让大家可以更深刻的理解IO流的具体操作. 1.文件拷贝 ...

  8. jQuery的一些简单基础知识

    ### 什么是jQuery?jQuery(js+Query)是一款优秀的JavaScript库,帮助开发人员用最少的代码做更多的事情,官网网站http://jquery.com/ ### 为什么学习j ...

  9. unity网络----简单基础

    网络 TCP:与打电话类似,通知服务到位 UDP:与发短信类似,消息发出即可 IP和端口号是网络两大重要成员 端口号(Port)分为知名端口号[0-1024,不开放)和动态端口号[1024,10000 ...

  10. python mysql安装&&简单基础sql

    ##############总结############## 1.mysql 介绍 Mysql是开源的,所以你不需要支付额外的费用. Mysql支持大型的数据库.可以处理拥有上千万条记录的大型数据库. ...

随机推荐

  1. Javascript 根据文件名判断是否未图片

    var isImage = (/\.(gif|jpe?g|tiff?|png|webp|bmp)$/i).test(filename)

  2. Python：值得学习的二十个技巧

    本文为大家介绍20个值得记住的 Python 技巧,可以提升您编程技巧, 并为您节省大量时间. 在平常编程过程中,以下技巧大多非常有用. 1 字符串反转 使用切片反转字符串. str1="q ...

  3. Python批量创建word文档（1）- 纯文字

    Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.最后贴上自己的联系方式.代码如下: 1 ''' 2 #python根据需求新 ...

  4. 认识ollydbg

    四个区域:汇编区:虚拟地址,机器码,汇编指令,注释: 寄存器区:寄存器,数据: 数据区, 栈. 这是上面按钮的作用 热键: Ctrl+F2 - 重启程序. Alt+F2 - 关闭被调试程序. F3 - ...

  5. 记git提交异常

    描述:git项目工作目录和idea空间配置不一致导致git提交了其他项目至gitlab 项目a的工作目录设置为为a的父目录.提交时将目录下的 b项目提交至git 且提交时显示内容与实际提交不符 工作电 ...

  6. [论文分享]Channel Pruning via Automatic Structure Search

    authors: Mingbao Lin, Rongrong Ji, etc. comments: IJCAL2020 cite: [2001.08565v3] Channel Pruning via ...

  7. Spring-Boot配置文件web性能（服务器）配置项（常用配置项为红色）

    参数 介绍 server.address 服务器应绑定到的网络地址 server.compression.enabled = false 如果启用响应压缩 server.compression.exc ...

  8. JavaSwing 船只停靠管理可视化（五）

    JavaSwing 船只停靠管理可视化(一) JavaSwing 船只停靠管理可视化(二) JavaSwing 船只停靠管理可视化(三) JavaSwing 船只停靠管理可视化(四) JavaSwin ...

  9. Spring Boot的自动配置

    Spring Boot的自动配置 --摘自https://www.hollischuang.com/archives/1791 随着Ruby.Groovy等动态语言的流行,相比较之下Java的开发显得 ...

  10. java中装箱，拆箱

    (1)包装类 java中不能定义基本数据类型的对象,但是提供了基本数据类型的包装类来解决这一问题,例如int类型的包装类Integer, 包装类的常用方法有Integer.ParseInt()方法类将 ...