昨日内容回顾

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. elasticsearch update方法报错: Too many dynamic script compilations within, max: [75/5m]

    PUT _cluster/settings    {        "transient" : {            "script.max_compilations ...

  2. C语言应用--数据类型定制一定义和引用

    目前,定制正在变的越来越普遍,定制服务.定制衣服.甚至使用的键盘都是定制了.在C语言中虽然也包括了整型.字符型和浮点型等基本类型,也有基本的组合数据类型数组.但是这些类型都是针对某一种特定类型时应用没 ...

  3. rpm包和deb分别是什么?

    一.RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redhat Linux Packet Manager,就是Redhat的包管理器),后缀 ...

  4. Error: unable to load xmlsec-openssl library

    yum install libxml2-devel xmlsec1-devel xmlsec1-openssl-devel libtool-ltdl-devel

  5. SQL优化 | Oracle 绑定变量

    之前整理过一篇有关绑定变量的文章,不太详细,重新补充一下. Oracle 绑定变量 http://www.cndba.cn/Dave/article/1275 一.绑定变量 bind variable ...

  6. OpenJudge计算概论-忽略大小写比较字符串大小

    /*======================================================================= 忽略大小写比较字符串大小 总时间限制: 1000ms ...

  7. 如何十倍提高你的webpack构建效率

    前言 http://jafeney.com/2016/07/10/2016-07-10-webpack/     webpack 是个好东西,和 NPM 搭配起来使用管理模块实在非常方便.而 Babe ...

  8. 【转】nodejs接收前端formData数据

    很多时候需要利用formdata数据格式进行前后端交互. 前端代码可以是如下所示: <!DOCTYPE html> <html lang="en"> < ...

  9. ObjectAnimator简单示例

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  10. 0.9.0.RELEASE版本的spring cloud alibaba nacos+feign实例

    这里的feign依然是原来的feign,只不过将注册中心由eureka换成了nacos.服务提供方参见0.9.0.RELEASE版本的spring cloud alibaba nacos实例,消费方跟 ...