HTML+CSS+JS自学手记二

今天学习的标签主要是用于与浏览者交互方面的,复杂性感觉也已经比之前的有所提高,不过学习下来也不算感觉难,就是要记的东西又多了,不过多练练应该问题不大。

  <a>标签,链接到另一页面。语法结构为:

<a href=“目标网址” title=“鼠标滑过时提示的文本”>链接显示的文本</a>

  有时候需要在新的浏览器窗口打开链接,可以这样实现:

<a href=“目标网址” target=”_blank”>

  另外,使用mailto可以在网页链接Email地址,语法示例:<a href=”mailto:邮箱地址?cc=抄送地址&bcc=密件抄送地址&subject=主题&body=邮件内容”>发送</a>,详细介绍如图:

  如需在网页中插入图片,可使用<img>标签,用法为<img src=”图片地址” alt=”下载失败时替换的文本” title=”鼠标滑过提示的文本”>。图片的格式可以使GIF,PNG,JPEG。

  接下来是与浏览者交互很重要的标签,表单标签<form>,表单标签可以把用户输入的数据传输到服务器端。语法为<form method=”传送方式” action=”服务器文件”>…</form>。Method是传输数据的方式(get/post),action是浏览者输入的数据传送到的地方,比如一个PHP页面(save.php)。注:所有表单控件(文本框、文本域、按钮、单选框、复选框等)等必须放在<form></form>标签之间。

  文本输入框、密码输入框,用户可在表单中键入字母、数字等内容,语法为:

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

当type为text时,为文本输入框,当type为password时为密码输入框,代码示例:

<form>
     账户
    <imput type=”text” name=”myname”>
    密码
    <input type=”password” name=”pass”>
</form>

显示结果为:

  当用户需要输入大段文字时,需要用到文本输入域,实现语法为:<textarea rows=”行数” cols=”列数”>文本</textarea>。代码示例:

<form action=”save.php” method=”post”>
    <lable>个人简介:</lable>
        <textarea rows=”10” cols=”50”>在这里输入内容。。。</texrarea>
</form>

  单选框复选框的实现,当tyoe=”radio“时为单选框,当type=”checkbox”时为复选框,语法为<input type=”radio/checkbox” value=”值” name=”名称” checkbox=”checked”>。同一组框内name要相同。当checkbox等于checked时,该选项被默认选中。

  如需用到下拉列表框,可用一下代码实现:

<form>
               <lable>爱好:</lable>
               <select>
                      <option value=”购物”>购物</option>
                      <option value=”运动”>运动</option>
                      <option value=”音乐”>音乐</option>
                     <option value=”购物” selected=”selected”>购物</option>
                </select>
</form>

在浏览器中显示效果为。其中value是向服务器提交的值,<option>与</option>之间的才是显示的选项。如果要在下拉列表框中进行多选,则需在<select multiple=”multiple”>。

  当用户需要向服务器端提交数据时,需要用到提交按钮。<input type=”submit value=”提交””>,value表示的是按钮中显示的文字。

  

  同样的,当type=”reset”时,可以实现重置功能。

  

  Lable的作用,label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法为:<lable for=”控件id名称”>,标签中for的值应当与相关控件的id值相同,例:

<form>
               <label for="male">男</label>
               <input type="radio" name="sex" id="male" />
               <br />
               <label for="female">女</label>
               <input type="radio" name="sex" id="female" />
               <label for="email">输入你的邮箱地址</label>
               <input type="email" id="email" placeholder="Enter email">
</form>

  到这里html的常用标签基本已经学习得差不多了,整体感觉没有什么难点,的确容易激发初学者的兴趣,不过还需要多加练习,下次就会进入CSS的学习。

时间: 2024-10-10 05:52:30

HTML+CSS+JS自学手记二的相关文章

HTML+CSS+JS自学手记一

抱着对编程的兴趣,一直想要学习一下编程这方面的东西,苦于并非计软专业并且无人指导,一直没有做到有规划的自学.其实大一曾学过C语言,可惜感觉上课学到的都是皮毛,好像并没有什么卵用,也没能为我继续进一步学习提供一定的兴趣和成就感.于是趁着暑假得空开始关注如何零基础开始自学编程,编程语言众多,没有专业人士指导真的感觉无从入手,决定从较为简单的HTML和CSS开始,先培养和提高自己对编程的兴趣.想要接触编程也并非是说想要以后就入这一行,仅仅是兴趣,不过当然希望自己能学有所成足以有能力进入这一行业.以此记

【笔记】.Net~逆天自学笔记-HTML+CSS+JS + JQ +Dom

HTML+CSS+JS+JQ+Dom参考集合:Library 真正的HTML(图片 | 笔记) HTML不是为了页面而存在,以后会更多的用在页面语意上,所有为了控制外观的都让css来操作,html5也是这样的 我眼中的CSS(图片|笔记|文档)JavaScriptBase(图片|笔记|源码)JavaScript Dom等

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png

在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还好以前写的helloworld,还能用. 一.关于开发环境 eclipse-jee-neon-1a-win32 Jdk 1.8u112 (32位版本) SpringMVC 4.3.4.RELEASE apache-tomcat-8.5.8 二.helloworld.jsp文件中的引用的样式表为 st

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单 原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文件,如果你输入某个css的文件在浏览器中得到的直接是404错误(例如http://localhost:8080/iMax_view/css/classify.css),表示路径肯定没有错,这是因为你在web.xml中配置的springservlet ]<!-- springmvc前端控制器,rest

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

项目名称:github-notification 项目地址:https://github.com/wuchangming/github-notification 说明:本人打算抽时间学习前端(html + css +js),选择Chrome扩展应用程序制作一个简单练手的项目.避免中途放弃在此立字为证! 有一起的兄弟吗? 项目简介:一款开源的,关于Github通知和监控个人项目的Chrome扩展应用程序(其实就是想监控下github上某个项目的star数,fork数等等.当然大家有什么想法也可以一

Node.js自学之路——2.前端管理

序—— <Node.js自学之路>系列文章,将记录我学习基于Node.js进行Web开发的过程. Node.js是基于V8引擎运行的开发平台,执行JavaScript速度快.性能好:也因其以JavaScript作为开发语言,对于前端工程师而言,它的学习曲线更低.开发效率更高. 文章目录: Node.js自学之路——1.环境搭建 Node.js自学之路——2.前端管理 一.Bower——前端类库管理 1.为什么使用bower 前端需要使用大量的类库,常用的就有:用来解决IE功能性Bug的HTML