在今天的Web开发学习中,我掌握了一些HTML和CSS的基础知识,下面我将分享我的学习笔记,帮助大家快速构建一个简单的Web界面。
一、HTML基础标签
1. 网站头
使用<title>
标签定义网页的标题。
html
html
<title>我的第一个网页</title>
2. 标题
使用<h1>
到<h6>
标签定义标题,其中<h1>
表示最大标题,<h6>
表示最小标题。
html
html
<h1>一级标题</h1>
<h2>二级标题</h2>
3. 段落
使用<p>
标签划分段落。
html
html
<p>这是一个段落。</p>
4. 换行
使用<br>
标签进行换行。
html
换行前<br>换行后
5. 实体字符
在HTML中,某些字符需要使用实体字符表示。
<
表示<
>
表示>
表示空格©
表示 ©
二、CSS布局
1. div布局
使用<div>
标签进行页面布局,并通过style
属性设置样式。
html
<div style="background-color: cadetblue; height: 100px;" id="head">导航</div>
<div style="background-color: aqua; height: 400px;" id="main">内容</div>
<div style="background-color: blue; height: 100px;" id="bottom">页脚</div>
三、图片与超链接
1. 图片
使用<img>
标签插入图片,并设置相关属性。
html
html
<img src='image.jpg' width="200" height="150" title="图片提示" alt="图片加载失败">
2. 超链接
使用<a>
标签创建超链接,并通过target
属性设置打开方式。
html
<a href="https://www.example.com" target="_blank">访问示例网站</a>
_self
:在当前页面打开_blank
:在空白页面打开
四、表单
使用<form>
标签创建表单,并通过action
、method
和enctype
属性设置表单提交的相关信息。
html
<form action="submit_form.php" method="get" enctype="">
账户:<input type="text" name="uname"><br>
密码:<input type="password" name="passwd"><br>
手机:<input type="text" name="phone"><br>
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女<br>
爱好:<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="music">音乐<br>
</br>
所在城市
<select name="city" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<input type="submit" name="sm">
</form>
method
:提交方式,get
和post
。get
方式提交的数据会显示在URL地址栏中,而post
方式不会。enctype
:文件编码格式,通常用于文件上传。
五.iframe
<iframe>标签,可以将其他网页嵌入到当前网页
html
<iframe src="https://www.baidu.com" frameborder="100" width="100%" height="500px">123</iframe>
通过今天的学习,我掌握了构建简单Web界面的基本方法。接下来,我将继续深入学习更多Web开发知识,不断提升自己的技能。希望这篇笔记对大家有所帮助