0
点赞
收藏
分享

微信扫一扫

HTML极速入门

cnlinkchina 03-05 23:30 阅读 3
htmlc#前端

HTML基础

什么是HTML

HTML(Hyper Text Markup Language),超文本标记语言.

超文本:比文本更强大.通过链接和交互式方式来组织和呈现信息的文本形式.不仅仅有文本,还可能包括图片,音频,或者自己经审阅过它的学者所加的评注,补充或脚注等.

标记语言:由标签构成的语言

比如下方代码(编译器使用的是vscode):

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

经过浏览器的解析如下:

 

上面代码中<h1><h2><h3>就是标签.

学习HTML主要就是学习标签.

认识HTML标签

HTML代码是由"标签构成的".

<h3 id="myId">我是三级标题</h3>

 HTML文件基本结构

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

标签层次结构

父子关系

兄弟关系

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

标签之间的结构关系,构成了一个DOM树.(DOM是Document Object Mode(文档对象模型)的缩写).

HTML快速入门

开发工具

HTML可以使用系统自带的记事本来编写,但是非常不方便,作者使用的是:Visual Studio Code.

快速开发

在VS Code中创建文件 xxx.html(需要提前下载插件:open in 和 auto rename),直接输入!,按Enter或Tab键,此时能自动生成代码的主题框架.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 在<body></body>标签中,书写任意文字,按Crtl+s保持文件,通过浏览器访问即可(通过右击文件然后这么做(前提是你下好了open in):).

 HTML常见标签

标题标签h1-h6

有6个,从h1到h6,数字越大则字体越小.

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

 段落标签:p

在HTML中,段落,换行符,空格都会失效,如果需要分成段落,需要使用专门的标签.

p标识表示一个段落.

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

换行标签:br 

想要完成换行的话,也可以通过<br/>标签来实现.(br是break的缩写,表示换行).

 

图片标签:img

 img标签必须带有src属性,表示图片的路径.

<img src="rose.jpg">

此时要把rose.jpg这个图片文件放到和html中的同级目录中.

img标签的其它属性

注意:

1.属性可以有多个,不能写到标签之前.

2.属性之间用空格分割,可以是多个空格,也可以是换行.

3.属性之间不分先后顺序.

4.属性使用"键值对"的格式来表示.

超链接:a

<a href="http://www.baidu.com">百度</a>

链接的几种形式:

外部链接:href引用其它网站的网址.

内部链接:网站内部页面的链接,先创建一个1.html,再创建一个2.html

空链接:使用#进行占位.

<a href="#">空链接</a>

表格标签

table包含tr, tr包含td.

表单标签

表单是让用户输入信息的重要途径.

分成两个部分:

form标签

<form action="test.html">
... [form 的内容]
</form>

描述了要把数据按照什么样的方式,提交到哪个页面中.

input标签

各种输入控件,单行文本框,按钮,复选框.

下面介绍一些常用的类型:

1.文本框

<input type="text">

2.密码框

<input type="password">

3.单选框

性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="chkecked">女

注意:单选框之间必须具备相同的name属性,才能实现多选1的效果.

4.复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆

 5.普通按钮

<input type="button" value="我是个按钮">

当前点击没有反应,需要搭配JS使用.

<input type="button" value="我是个按钮" onclick="alert('原神启动')">

 6.提交按钮

<from action="示例.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</from>

提交按钮必须放入form标签内.点击后就会尝试给服务器发送请求. 

 select标签

下拉菜单

option中定义selected="selected"表示默认选中.

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

textarea标签

<textarea rows="3" cols="50">

</textarea>

 文本域中的内容,都是默认内容,注意:空格也有影响.

rows和cols也都不会直接使用,都是使用CSS来改的.

无语义标签:div&span

div标签,division的缩写,含义是分割

span标签,含义是跨度.

就是两个盒子,用于网页布局.

综合练习:用户注册

用户注册页面

 

<h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input text="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="button" value="注册">
        <span>已有帐号?</span><a href="#">登录</a></br>
    </div>

 

 

 

 

举报

相关推荐

0 条评论