Html再学
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>
输入空格
<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再学的更多相关文章
- 【C】 01 - 再学C语言
“C语言还用再学吗?嵌入式工程师可是每天都在用它,大家早就烂熟于心,脱离语言这个层面了”.这样说不无道理,这门古老的语言以其简单的语法.自由的形式的而著称.使用C完成工作并不会造成太大困扰,所以很少有 ...
- [Python]再学 socket 之非阻塞 Server
再学 socket 之非阻塞 Server 本文是基于 python2.7 实现,运行于 Mac 系统下 本篇文章是上一篇初探 socket 的续集, 上一篇文章介绍了:如何建立起一个基本的 sock ...
- 再学Java 之 interface的成员变量
前言:最近在学多线程,写“哲学家就餐问题(Dining Philosophers)”的时候,需要定义一个全局的变量,即哲学家的人数.常用的做法是在其中一个类中定义一个static final的变量,然 ...
- 再学python类(终结篇)
续写 初学python类,这几天吃坏东西了,拖着虚弱的身躯写的.有些乱请各位看官海涵. 声明:本人编程新手,还在学习中.所表述的东西都是基础语法之类的,分享我的学习笔记.还望多多指点,我一定虚心接受. ...
- 他学习一年Python找不到工作,大佬都说你别再学Python了!
引言: 都说,滴水穿石非一日之功.然而有些人即使奋斗一辈子也比不上别人一年,别人学习一年比不得你学习一个月.其中缘由,有些人看了大半辈子还没看明白. 即使Python这么火,为何你学习一年的Pytho ...
- Java编码方式再学
一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...
- 不要再学 JSP 了,学 SpringBoot + Thymeleaf + Vue吧
老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...
- 再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含 ...
- 『忘了再学』Shell基础 — 10、Bash中的特殊符号(二)
提示:本篇文章接上一篇文章,主要说说()小括号和{}大括号的区别与使用. 8.()小括号 ():用于一串命令执行时,()中的命令会在子Shell中运行.(和下面大括号一起说明) 9.{}大括号 {}: ...
- 『忘了再学』Shell基础 — 30、sed命令的使用
目录 1.sed命令说明 2.行数据操作 (1)查看文件中的数据 (2)删除文件中的数据 (3)向文件中追加数据 (4)向文件中插入数据 (5)修改文件中的多行数据(删除,追加,插入) (6)替换文件 ...
随机推荐
- Codeforces Problem - 38E - Let's Go Rolling!(DP)
E. Let's Go Rolling! time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- handlebars中的partial
高级玩家:partial 比较推崇使用分页来实现组件化.分页跟helper一样需要先注册.在hbs模块中可以批量注册,比较简单. hbs.registerPartials(__dirname + '/ ...
- 【转】ruby中nil?, empty? and blank?的选择
In Ruby, you check with nil? if an object is nil:article = nil article.nil? # => true empty? chec ...
- 管理react路由的history对象的插件history的使用介绍
本文介绍如何使用history插件管理浏览记录 history插件的使用 history这个插件可以方便管理你的浏览记录 cnpm install history --save import crea ...
- virtualbox下安装的纯净版centOS7,无法访问外网
virtualbox下安装的纯净版centOS7,网络设置如下: 需要在/etc/sysconfig/network-scripts/下编辑ifcfg-enp0s3,其中,NOBOOT设置成也是,就可 ...
- 2011-12-14 调用cmd并获得输入输出+网络访问
System.Diagnostics.Process pro = new System.Diagnostics.Process(); pro.StartInfo.FileName = "cm ...
- 2016.2.28 DataTable用法汇总
将控件的DataSource转换为DataTable,但是,此控件的DataSource绑定时必须是DataTable,不能是List DataTable dt = (bgvRoutePortion. ...
- HDLM工具介绍
HDLM提供了以下一些工具,以方便HDLM多路径管理. 1. dlmgetras hdlm信息收集工具,用来收集hdlm相关的各种日志.trace.配置等文件,以方便进行hdlm故障分析. 命令格式 ...
- 转载-你应该知道的 RPC 原理
在校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 而一旦踏入公司尤其是大型互联网公司就会发现,公司的系 ...
- set源码之心得
C++的STL很强大,强大到我只愿慵懒地去使用而不知其所以然.直到李师问我,我的回答被李师否定,我方才意识到自己是多么地浅陋.希望自己有空抽时间把STL源码给研究一下,化为自己真正可以掌控的力量. s ...