1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包括文字、图片、视频等。

2.  CSS样式是展现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3.  JavaScript是用来实现网页上的特效。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片的轮换）。可以这个理解，有动画的，有交互的一般都是用JavaScript来实现。

4.  标签之间是可以嵌套的。

Html文件的基本结构

<html>     <head>...</head>     <body>...</body> </html>

1.  <html></html>称为根标签，所有的网页标签都在此下

2.  <head>标签用于定义文档的头部，它的所有头部元素的容器。头部元素有<title>、<script>、  <style>、<link>、<meta>等标签。

3.  在<body>标签里内容都是网页的主要内容.

Html的代码注释：<!--注释文字-->

标签的用途

语义化。就是明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。

语义化的好处：

l  更容易被搜索引擎收录。

l  更容易让屏幕阅读器读出网页内容。

<p>段落文本</p>段落标签

<h>标签，标题标签

强调语气标签：<em>斜体、<strong>加粗。可以css修改

使用<span>标签：

1.  <em>和<strong>强调关键字

2.  <span>标签没有语义，它的作用是为了设置单独的样式用的

<q>标签，短文本引用

注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

<blockquote>，长文本引用

<q>是对短文本的引用，几句话这样。

<br>标签分行显示文本，换行

语法：

xhtml1.0写法：<br />

html4.01写法：<br>

&nbsp;输入空格

<hr>添加水平横线

<address>，为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展现出来，这些就可以用此标签来展示。

<code>加入单行代码

<pre>加入多行代码

<ul><li>是没有前后顺序地列表

<ol><li>有顺序

<div>相当于一个容器

确定逻辑部分：

逻辑部分：页面上相关联的一组元素，如网页中的独立栏目板块。

举例：一个页面相当于一个衣橱，而div能分出很多格子

div的id属性：相当于身份证，唯一标识，必须唯一。

<table>表格标签

<style type="text/css">

table tr,td,th{border: 1px solid #993300;}

</style>

表格加个边框

<a href="目标网址" title="鼠标滑过显示的文本">

<a href="目标网址" target="_blank">在新的浏览器窗口打开链接

使用mailto在网页中链接Email地址

如果mailto后面同时有多个参数的话，第一个参数必须以？开头，后面每个参数都以&分隔

<img>为网页插入图片

<img src="myimage.gif" alt="My Image" title="My Image">

src：标识图片的位置

alt：指定图像的描述性文件，当图像不可见时（下载不成功时），可以看到该属性指 定的文本

title：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）

使用表单标签<form>，与用户交互>

<form action="服务器文件" method="传送方式"></form>

action:浏览者输入的数据被传送的地方，比如一个PHP页面

method：数据传送的方式POST/GET

<form action="" method="post">

<label for="username">用户名：</label>

<input type="text" name="username" /><br>

<label for="psss">密码：</label>

<input type="text" name="pass" />

<form action="">

<input type="text/password" name="名称" value="文本">

</form>

type=text，文本输入。type=password，密码框输入

name:为文本框命名，以备后台程序ASP/PHP使用

value：为文本输入框设置默认值（一般起到提示的作用）

<form action="" method="get">

姓名：

<input type="text" name="myName" value="请输入姓名">

<br>

密码：

<input type="password" name="myPassword" value="请输入密码">

</form>

文本域，支持多行文本输入

<textarea name="" id="" cols="列数" rows="行数"></textarea>

cols:多行输入域的列数

rows：多行输入域的行数

<form action="save.php" method="post">

<label for="">联系我们</label>

<textarea name="" id="" cols="80" rows="10">在这里输入内容</textarea>

</form>

使用单选框、复选框，让用户选择

<input type="radio/checkbox" value="值" name="名称" checked="checked">

type：=radio，单选框、=checkbox，复选框

value：提交数据到服务器的值

name：为控件命名，以为后台使用

checked：当设置checked="checked"时，该选项默认选中

<form action="" method="post">

你是否喜欢旅游？<br>

<input type="radio" name="radiolove" value="喜欢" checked="checked">喜欢

<input type="radio" name="radiolove" value="不喜欢">不喜欢

<input type="radio" name="radiolove" value="无所谓">无所谓

<br><br>

你对那些运动感兴趣？<br>

<input type="checkbox" name="checkbox1" value="跑步">跑步

<input type="checkbox" name="checkbox2" value="打球" checked="checked">打球

<input type="checkbox" name="checkbox3" value="登山">登山

<input type="checkbox" name="checkbox4" value="健身" checked="checked">健身

</form>

使用下拉菜单，节省空间

<form action="" method="post">

<label for="">爱好：</label>

<select name="" id="">

<option value="读书">读书</option>

<option value="运动">运动</option>

<option value="音乐">音乐</option>

<option value="旅游">旅游</option>

<option value="购物" selected="selected">购物</option>

</select>

</form>

value：向服务器提交的值

select="selected"属性，选项默认选中

使用提交按钮，提交数据

<input type="submit" value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

<form action="" method="post">

<label for="myName">姓名：</label>

<input type="text" value="" name="myName">

<input type="submit" value="提交" name="submitBtn">

</form>

使用重置按钮，重置表单信息

<input type="reset" value="重置">

<form action="" method="post">

<label for="myName">姓名：</label>

<input type="text" name="myName">

<input type="reset" name="resetBtn" id="" value="重置">

</form>

form表单中的label标签

label标签不会向用户呈现任何效果，它的作用是为鼠标用户改进了可用性。如何你在label标签内点击文本，就会自动触发此控件。就是说，如果用户选中该label标签时，浏览器会自动将焦点转到相关的表单控件上。

<label for="控件id名称"></label>

<form action="">

<label for="male">男</label>

<input type="radio" name="gender" id="male">

<br>

<label for="female">女</label>

<input type="radio" name="gender" id="female">

<label for="email">输入你的邮箱地址</label>

<input type="email" name="" id="email" placeholder="Enter email">

</form>

Html再学的更多相关文章

  1. 【C】 01 - 再学C语言

    “C语言还用再学吗?嵌入式工程师可是每天都在用它,大家早就烂熟于心,脱离语言这个层面了”.这样说不无道理,这门古老的语言以其简单的语法.自由的形式的而著称.使用C完成工作并不会造成太大困扰,所以很少有 ...

  2. [Python]再学 socket 之非阻塞 Server

    再学 socket 之非阻塞 Server 本文是基于 python2.7 实现,运行于 Mac 系统下 本篇文章是上一篇初探 socket 的续集, 上一篇文章介绍了:如何建立起一个基本的 sock ...

  3. 再学Java 之 interface的成员变量

    前言:最近在学多线程,写“哲学家就餐问题(Dining Philosophers)”的时候,需要定义一个全局的变量,即哲学家的人数.常用的做法是在其中一个类中定义一个static final的变量,然 ...

  4. 再学python类（终结篇）

    续写 初学python类,这几天吃坏东西了,拖着虚弱的身躯写的.有些乱请各位看官海涵. 声明:本人编程新手,还在学习中.所表述的东西都是基础语法之类的,分享我的学习笔记.还望多多指点,我一定虚心接受. ...

  5. 他学习一年Python找不到工作，大佬都说你别再学Python了！

    引言: 都说,滴水穿石非一日之功.然而有些人即使奋斗一辈子也比不上别人一年,别人学习一年比不得你学习一个月.其中缘由,有些人看了大半辈子还没看明白. 即使Python这么火,为何你学习一年的Pytho ...

  6. Java编码方式再学

    一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...

  7. 不要再学 JSP 了，学 SpringBoot + Thymeleaf + Vue吧

    老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...

  8. 再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销

    写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含 ...

  9. 『忘了再学』Shell基础 — 10、Bash中的特殊符号（二）

    提示:本篇文章接上一篇文章,主要说说()小括号和{}大括号的区别与使用. 8.()小括号 ():用于一串命令执行时,()中的命令会在子Shell中运行.(和下面大括号一起说明) 9.{}大括号 {}: ...

  10. 『忘了再学』Shell基础 — 30、sed命令的使用

    目录 1.sed命令说明 2.行数据操作 (1)查看文件中的数据 (2)删除文件中的数据 (3)向文件中追加数据 (4)向文件中插入数据 (5)修改文件中的多行数据(删除,追加,插入) (6)替换文件 ...

随机推荐

  1. ES之二：Elasticsearch原理

    Elasticsearch是最近两年异军突起的一个兼有搜索引擎和NoSQL数据库功能的开源系统,基于Java/Lucene构建.最近研究了一下,感觉 Elasticsearch 的架构以及其开源的生态 ...

  2. SpringBoot自动化配置之一：SpringBoot内部的一些自动化配置原理

    springboot用来简化Spring框架带来的大量XML配置以及复杂的依赖管理,让开发人员可以更加关注业务逻辑的开发. 比如不使用springboot而使用SpringMVC作为web框架进行开发 ...

  3. Rename Oracle Managed File (OMF) datafiles in ASM(ZT)

    Recently I was asked to rename a tablespace. The environment was Oracle version 11.2.0.3 (both datab ...

  4. x264的一些参数设置对编码效率的影响

    i_luma_deadzone[0]和i_luma_deadzone[1]分别对应inter和intra, 取值范围1~32,测试可以得知,这连个参数的调整可以对数据量有很大影响,值越大数据量相应越少 ...

  5. OpenCV4Android 不需要安装OpenCVManager，就可以运行的方法

    http://blog.csdn.net/yanzi1225627/article/details/27863615 OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种 ...

  6. 在JAVA中，String,Stringbuffer,StringBuilder 的区别

    首先是,String,StringBuffer的区别 两者的主要却别有两方面,第一是线程安全方面,第二是效率方面 线程安全方面: String  不是线程安全的,这意味着在不同线程共享一个String ...

  7. js面试题知识点全解(一闭包)

    闭包使用场景:1.函数作为返回值,如下场景 function F1(){ var a = 100 //自由变量 //返回一个函数(函数作为返回值) return function(){ console ...

  8. CodeForces 1109C. Sasha and a Patient Friend

    题目简述:维护以下三种操作 1. "1 t s":在时刻$t$插入命令$s$.保证任意操作后,任意时刻至多只有一个命令. 2. "2 t":删除时刻$t$的命令 ...

  9. centos 端口iptables配置

    1.安装iptables yum install iptables* -y 2.打开端口 iptables -I INPUT -p tcp --dport -j ACCEPT 3.查看本机关于IPTA ...

  10. Python 黑客 --- 002 入门级 ZIP压缩文件口令暴力破解机

    Python 黑客 入门级实战:ZIP压缩文件口令暴力破解机 使用的系统:Ubuntu 14.04 LTS Python语言版本:Python 2.7.10 V 编写zip 压缩文件口令破解器需要使用 ...