一、写在前面
HTML大家熟悉的超文本标记语言,注意它只是标记语言,跟JAVA、C++等编译语言是不一样的。
简单点说我想让一句话“hello my web”这句话出现在网页中,当然不能通过在“图画”工具中插入一个文本框来输入,这时候就需要html中定义的标签来替我们实现。如段落标签“
hello my web
”,输入标签“”,按钮标签“”等
网页中有很多元素,我们在涉及网页的时候当然不能通过拖拽这种方式来布局网页,如果想让刚才那句话出现在网页的左部或者右部或者中间或者等等等等需要怎么办呐?这时候就需要设置标签里面的属性来替我们实现。如“
二、HTML
标签名 | 属性 及其取值 | 作用 |
< a > | href:超链接url地址 | 插入超链接 |
< br > | 换行 | |
< button > | 规定一个按钮 | |
< div > | 可用CSS对其进行样式的修饰id:规定该div的id名,class:规定该div的class类名 | 可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联 |
< img > | src: 图片的url地址,alt: 规定图像的替代文本 | 向网页中嵌入一幅图像 |
< input > | type:text(文本输入框) password(密码输入框) radio(单选按钮) checkbox(复选框)button(自定义按钮) reset(重置按钮) submit(提交按钮) file(文件) | 用于搜集用户信息 |
三、JS
使用前需要在body中定义先加入一个“< script >”标签然后在标签内部定义function这里需要注意function的作用域。
<script>
function input_focus(str){
console.log(str);
}
</script>
标签名 | 属性 及其取值 | 作用 |
background | 取值为颜色值,或是背景图片url | 在一个声明中设置所有的背景属性 |
background-color | 取值为颜色值 | 设置元素的背景颜色 |
background-position | 取值有四个,即上右下左方向值,也可取两个值 | 设置背景图像的开始位置 |
下面代码便是将html与script联系起来,点击输入框时,控制台可以看到输出了’onfocus’这个字符的事件。
<input style="width:540px; height:36px" type="text" onfocus="input_focus('onfocus')"></input>
HTML和JS的属性有很多,需要不断的练习才能熟能生巧。(持续更新中)