标签语法

　标签的语法：

<标签名 属性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. 用burp爆破tomcat的过程

    首先burp抓包,将抓到的包放到intruder中 通过burp中自带的解码得知账号密码中有个":"号 所以我们选择的数据类型为Custom iterator 第二条输入" ...

  2. 容器编排系统k8s之Ingress资源

    前文我们了解了k8s上的service资源的相关话题,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14161950.html:今天我们来了解下k8s上的In ...

  3. Mysql5.7.20安装手记

    Mysql到5.7之后安装较之前有了很大的不同,特别是解压缩版,可能安装速度较之前有所减少,但对于我们这种一直使用5.5的我来说不知道步骤还真是挺费劲的.下面详细记一下我安装的过程. 1.下载mysq ...

  4. [php]配置文件中的超时时间

    概要 php.ini l  max_execution_time l  max_input_time php-fpm.conf l  process_control_timeout l  reques ...

  5. linux中的dmesg命令以及确定进程是否被系统主动kill

    linux中的dmesg命令以及确定进程是否被系统主动kill Feb 21, 2017 | java | 185 Hits 近期发现线上项目的进程莫名其妙的就不见了,也没有崩溃日志,就怀疑是被操作系 ...

  6. 【分布式锁】Redis实现可重入的分布式锁

    一.前言 之前写的一篇文章<细说分布式锁>介绍了分布式锁的三种实现方式,但是Redis实现分布式锁关于Lua脚本实现.自定义分布式锁注解以及需要注意的问题都没描述.本文就是详细说明如何利用 ...

  7. RocketMQ 简介

    本文根据阿里云 RocketMQ产品文档整理 地址:https://help.aliyun.com/document_detail/29532.html?userCode=qtldtin2 简介 Ro ...

  8. linux 下socket编程

    原理 类unix系统中, 一切皆文件, 诸如磁盘文件, 显卡, 内核驱动, 网络协议栈等 socket就是linux中提供的用于网络通信的文件接口, 两台机器之间可以读写消息 在使用socket真正的 ...

  9. kafka如何保证消息得顺序性

    1. 问题 比如说我们建了一个 topic,有三个 partition.生产者在写的时候,其实可以指定一个 key,比如说我们指定了某个订单 id 作为 key,那么这个订单相关的数据,一定会被分发到 ...

  10. CentOS-8.3.2011-x86_64 配置网络环境的几个方案以及问题处理方法

    1. 在安装前的环境配置中配置网络 可以通过 NETWORK & HOST NAME 进行网络配置, 推介通过这里便捷设置. 如果在安装的 CentOS 之前的配置选项中没有进行用户和网络的配 ...