昨日内容回顾

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. JavaScript 判断是否为空

    // var a = ""; // var a = " "; // var a = null; // var a = undefined; // var a = ...

  2. LeetCode 第 153 场周赛

    一.公交站间的距离(LeetCode-5181) 1.1 题目描述 1.2 解题思路 比较简单的一题,顺时针.逆时针两次遍历,就能解决. 1.3 解题代码 class Solution { publi ...

  3. tornado异步请求响应速度的实例测试

    tornado异步请求响应速度的实例测试

  4. 如果前面的IO操作出问题了，按照我们代码的意思，不就try catch 了吗，这样的话线程就没关闭了，就会造成线程泄露。 那怎么解决这个问题呢，其实也简单，把关闭线程的方法写到finally里就可以了。

    https://mp.weixin.qq.com/s/WaNVT2bZFGHNO_mb5nK6vw 连HDFS源码大神都会犯的错之线程泄露(1) 西瓜老师 西瓜老师爱大数据 1月11日  

  5. excel_vlookup函数_python代码实现

    python入门经典视频系列教程(免费,2K超清,送书) https://study.163.com/course/courseMain.htm?courseId=1006183019&sha ...

  6. Android 摇一摇监听实现

    package com.loaderman.androiddemo; import android.content.Context; import android.hardware.Sensor; i ...

  7. 不同三维引擎渲染IFC数据效果对比

  8. Sql Server 数字金额转中文金额 函数

    在做一些订单金额.合同金额转换的时候,经常会遇到数字转成中文的情况,所以整理了一个数字转中文的函数: /* 说明:数字金额转中文金额 示例:187.4 转成 壹佰捌拾柒圆肆角整 */ ,)) ) BE ...

  9. LeetCode_121. Best Time to Buy and Sell Stock

    121. Best Time to Buy and Sell Stock Easy Say you have an array for which the ith element is the pri ...

  10. node节点扩容

    node节点扩容: 安装docker 部署 kubelet组件 拷贝admin.conf 拷贝bootstrap.conf 安装cni网络插件 拷贝ca.pem 证书,配置kubelet-config ...