昨日内容回顾

HTML文档结构

标签要封闭,全封闭,自封闭

html文件不识别多个空格或者换行,都识别成一个空格

注释:

	<!-- 注释 -->

head标签

网页源信息,配置信息

title标签,标签页显示内容

body标签

h1 - h6

b,i,u,s,p,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标签(里面包含了也不显示)


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<span>你好,</span>

<div>

    <div>她也好</div>

    <span>大家都好</span>

</div>

<span>我也好</span>

<p>哈哈

    <p>呵呵</p>

</p>

</body>

</html>

结果

你好,

她也好

大家都好

我也好

哈哈

img标签和a标签

img标签  内敛标签

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

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


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            height:1000px;

            width:200px;

            background-color:palevioletred;

        }

    </style>

</head>

<body>

<div id = "top">div顶部</div>

<h1>朱一龙最帅最温柔</h1>

<img src="1.jpeg" alt="龙龙的独家专属" width = "500"  title = "我的沈巍">

<a href="">百度</a>

www.baidu.com

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

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

</body>

</html>

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 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" />
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按钮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <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="reset">

</form>

<span>xxxxxx</span>

</body>

</html>

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="" id="" cols="100" rows="10">

HTML 前端的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. [bzoj 4566][Haoi 2016]找相同字符

    传送门 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. Solution 考虑用SAM,采用较为轻 ...

  2. [WEB安全]phpMyadmin后台任意文件包含漏洞分析(CVE-2018-12613)

    0x00 简介 影响版本:4.8.0--4.8.1 本次实验采用版本:4.8.1 0x01 效果展示 payload: http://your-ip:8080/index.php?target=db_ ...

  3. TCP/IP 这猝不及防的爱情

    前言 前几天看了老刘的一篇文章,TCP/IP 大明邮差.正好最近也在读<计算机自顶向下>一书 心血来潮,想写一个女版的TCP/IP 正文 一天,我正在百花会上赏花,赏着赏着,就出现了一个令 ...

  4. 【原】Python基础-异常

    def cacls(x, y): try: return x/y except ZeroDivisionError: print("y can not be zerp") exce ...

  5. presto计算日期间隔天数或者小时间隔——date_diff函数使用

    “Presto是Facebook最新研发的数据查询引擎,可对250PB以上的数据进行快速地交互式分析.据称该引擎的性能是 Hive 的 10 倍以上.”,亲身用过之后,觉得比hive快了10倍不止. ...

  6. Mac中好用的快捷键

    1.safari safariy页面刷新:Command+R,类似于Win系统里面的F5

  7. 目录：JAVA

    收藏: Java:类与继承

  8. pve_ceph问题汇总

    在同一个网络内,建立了两个同名的群集 Jun 24 11:56:08 cu-pve05 kyc_zabbix_ceph[2419970]: ]} Jun 24 11:56:08 cu-pve05 co ...

  9. asyncio与gevent并发性能测试

    asyncio与gevent并发性能测试 在对网站进行扫描或者暴破时需要对网站进行高并发操作,然而requests+concurrent多线程性能上不太理想,了解到python用得比较多的并发库有as ...

  10. SQL语句里合并两个select查询结果

    SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...