HTML入门

ffff峰

已于 2023-03-15 20:10:30 修改

阅读量55

点赞数

文章标签： java xhtml Powered by 金山文档

于 2023-03-11 08:59:37 首次发布

本文链接：https://blog.csdn.net/m0_74395874/article/details/129411826

版权

本文介绍了HTML的基础标签，包括图像(img)、音频(audio)、视频(video)的使用，以及超链接(a)、表格(table)、布局(div和span)和表单(form)的构建。同时，提到了CSS的导入方式和JavaScript的基本语法，如变量、数据类型和函数定义。此外，还讨论了BOM对象如window、location和Element，以及事件绑定的方法。

摘要由CSDN通过智能技术生成

<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名</label><!--提升用户体验-->
    <input type="text" name="username" id="username"><br>

    <label for="password">密码</label>
    <input type="password" name="password" id="password"><br>

    性别:
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="0" id="famale"><label for="famale">女</label>
    <br>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1">阅读
    <input type="checkbox" name="hobby" value="2">旅游
    <input type="checkbox" name="hobby" value="3">音乐
    <br>

    头像：
    <input type="file"><br>

    城市:<select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
    </select><br>

    个人描述：
    <textarea cols="20" rows="5"></textarea><br>

    <input type="submit" value="注册">
    <input type="reset" value="重置">
    <input type="button" value="按钮">


</form>

CSS

导入方式

JS

引入方式

内部脚本:将JS代码定义在HTML页面中

在HTML中，JavaScript 代码必须位于<script>与</script>标签之间

<script>
    alert("hello JS");
</script>

提示:

在HTML文档中可以在任意地方，放置任意数量的<script>。

一般把脚本置于 <body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

基础语法

输出语句

使用window. alert()写入警告框

使用document . write()写入HTML输出

使用console. log()写入浏览器控制台

变量

JavaScript中用var关键字(variable 的缩写)来声明变量

ECMAScript 6新增了let关键字来定义变量。它的用法类似于var,但是所声

明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript 6新增了const关键字，用来声明-一个只读的常量。- -旦声明，常

量的值就不能改变。

数据类型

5种原始类型:

●number:数字(整数、小数、NaN(Not a Number))

●string:字符、字符串，单双引皆可

●boolean:布尔。true, false

●null:对象为空

●undefined:当声明的变量未初始化时，该变量的默认值是undefined

运算符

1.判断类型是否一样，如果不一一样，则进行类型转换

2.再去比较其值

===

1.判断类型是否一样，如果不一样，直接返回false

2.再去比较其值

类型转换:

*其他类型转为number:

1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt

2. booLean: true 转为1，false转为

*其他类型转为boolean:

1. nunper: 0和NaN转为false, 其他的数字转为true

2. string:空字符串转为false.其他的字符串转为true

3. nulL:false

4. undefined:false

函数

通过function

●定义: JavaScript函数通过function关键词进行定义，语法为:

function functionName(参数1,参数2..){

要执行的代码}

注意

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以往函数内部直接使用return返回即可

function add(a, b){

return a + b;}

Array

属性：length

方法：

push添加 splice删除

windows

属性:获取其他BOM对象

history

对History对象的只读引用。请参数History对象。

Navigator

对Navigator对象的只读引用。请参数Navigator对象。

Screen

对Screen对象的只读引用。请参数Screen对象。

location

用于窗口或框架的Location对象。请参阅Location对象。

方法：

alert()

显示带有一段消息和一个确认按钮的警告框。

confirm( )

显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval( )

按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout()

在指定的毫秒数后调用函数或计算表达式。

Location

Location:地址栏对象

获取:使用window.location获取，其中window. 可以省略

window.location.方法();

location.方法();

Element

获取:使用Document对象的方法来获取

1. getElementByld: 根据id属性值获取，返回一个Element对象

2. getElementsByTagName: 根据标签名称获取，返回Element对象数组

3. getElementsByName: 根据name属性值获取，返回Element对象数组

4. getElementsByClassName: 根据class属性值获取，返回Element对象数组

事件绑定

方式一:通过HTML标签中的事件属性进行绑定

function on(){

alert("我被点了");

方式二:通过DOM元素属性绑定

<input type="button" id="btn">

<script>

    document.getElementById("btn").onclick=function () {
        alert("我被点了")

    }
</script>

常见事件

快捷键

ctrl+F 批量修改

HTML入门

标签

基础标签

图片音频视频标签

超链接标签

表格标签

表单标签

CSS