A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© chen_yixin 初级黑马   /  2019-10-13 23:10  /  982 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

这20几天学习了很多!对我这种从未接触过的人来说,感觉每一次的书写都很有成就感。
以下这些比较重要的 也是最近使用比较多的列了一下:
web标准组成
结构标准(HTML)、表现标准(CSS样式)、行为标准(javascript)
图像标签
img标签,单标签,<img />,可以配合src属性将图片引入html页面,src属性是不能够省略的; ------ <img src=“图片路径” />
超链接
作用:实现页面之间的跳转,a标签,双标签;
常用属性:href用于指定链接目标的url路径地址,必不可少的;
         target 用于指定链接页面的打开方式,属性值我们一般选择新窗口打开 _blank;            
超链接的链接方式:
外部链接(在线链接):直接在href=“http://+要访问的网址”,注意http://必须书写;
内部链接:  直接在href=“书写html页面名称”,注意在书写内部链接的时候要书写清楚页面的路径;
空链接:    如果不知道要链接到什么地方,我们就暂时用#代替即可;
<a href="#"></a>
            我们也可以使用javascript:; 表示执行了一次空的JS语句
<a href="javascript:;"></a>
两个空链接的区别:#是将页面重新加载了一遍,javascript:;只是执行了一个空的js,页面没有被加载;
其他链接:我们不仅仅能给文字添加链接,我们还可以给其他的网页元素添加链接,例如:图像、表格、音频、视频等;
锚点定位
锚点的作用:
•        实现页面内部的跳转:
如何添加锚点效果
01、使用id名标注要跳转到的目标位置(锚点目标) <div id=“id名称”;></div>
02、使用超链接a进行锚点按钮设置,<a href=“#id名称”>链接文本</a>
input控件
input的常见属性
value  默认值
<input type="text" value="默认值">
name属性 主要是给后台工作人员区分数据入库用的,单选按钮会利用name分类
定义
input控件:输入的意思,可以更改type属性的属性值来指定不同的控件类型;
<input type="值"  >
文本框:input的type取值为text   
<input type="text" >
可以设置value属性设置默认的值,<input type=“text”  value=“默认值” />
密码框:input的type取值为password
<input type="password" >
单选按钮:input的type=“radio”

想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类;
<input type="radio" name="sex">男  
<input type="radio" name="sex">女
注意:name里面的值可以自己随意的起,单选按钮的input的name值必须相同;
复选按钮:type=“checkbox”,

可以设置同样的name名称,但是 不会影响多选的效果;
<input type="checkbox">爬山
<input type="checkbox">学习

实现单选和复选的默认选中
如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checkd”
单选按钮   <input type="radio" checked="checkde“  >
复选按钮   <input type="checkbox" checked="checkde" >
<input type="radio" name="sex" checked="checked">男男<input type="radio" name="sex">女
input按钮控件
也是通过更改input的type的取值不同实现不同按钮效果

普通按钮: type=“button”
必须要自己设置value值;
<input type="button" value="普通按钮">
提交按钮: type=“submit”
默认的是值是提交二字,我们也可以设置自己的value值也可以用默认的;
<input type="submit">
重置按钮: type=“reset”
可以设置自己的value值也可以用默认的;
<input type="reset">
图片按钮: type=“image“和 src=”图片路径”配合使用   
src属性必须书写查找图片路径;
<input type="image" src="img/btn.png">
文件域名: type=“file”
只要是 上传文件使用;

<input type="file">
button标签按钮
button是双标签里面可以包裹文字按钮
<button>我也是按钮哦</button>
label标签
作用:
提高用户体验,扩大input表单的可操作性,点击文字可以直接将光标定到输入框,不是表单标签;
使用方法:
01        用label直接包括input表单
02        <label>文本框:<input type="text" value="默认值"> </label>
02   用for 属性规定 label 与哪个表单元素绑定,需要id属性来配合使用,在input身上起id名称,label身上用for调用id的名称
<label for="pws">密 码:</label><input type="password" id="pws" >
textarea文本域标签

textarea 双标签,可以控制宽高,自带的两个属性cols和rows不使用,后期我们会使用css进行对应;
<textarea></textarea>
文本框input和文本域textarea的区别:
input只能显示一行文本, 单标签,通过value设置默认值 , 一般适用于用户名,昵称,密码等;
textarea可以显示多行文本,双标签,一般适用于留言板等;
select下拉列表
下拉列表的结构:
一对select标签嵌套多对的option标签
        <select>
                <option></option>
                <option></option>
        </select>
默认选中某一项
如果option有selected=“selected”表示默认选中;
<select>
        <option selected="selected">北京</option>
        <option>上海</option>
</select>
<select>
        <option value="">--请选择省份--</option>
        <option value="" selected="selected">甘肃</option>
        <option value="">浙江</option>
</select>
form表单域标签(很重要呀)
作用:
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
默认属性:
action=“url地址”   -----  用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式”  ---- 取值 get/post,get是明文提交,post是密文提交;
name=“名字”  设置不同的取值名称用于后台提交;
注意:一个页面中可能会出现过个form标签,我们需要用添加name属性设置不同的表单名称来区分;
<form action="" method="post" name="表单名称1"></form>
<form action="" method="post" name="表单名称2"></form>
块级元素:一行只能放一个元素,可以设置宽高,默认的宽度为100%,容器可以包含任何标签;
行内元素:一行可以放多个元素,不可以直接设置宽高,默认的宽度是有内容撑开的,尽量包含文本或者其他行内元素,超链接a有特殊情况;
行内块元素:一行放多个元素,可以设置宽高,默认的宽度是内容撑开的;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马