第一周笔记

最新推荐文章于 2024-09-27 13:30:27 发布

wsybqc

最新推荐文章于 2024-09-27 13:30:27 发布

阅读量280

点赞数 4

文章标签：笔记前端 css

本文链接：https://blog.csdn.net/wsybqc/article/details/136939912

版权

本文详细介绍了HTML中的各种标签使用，如标题、段落、链接、内联框架、表格、表单元素（包括输入类型、表单属性和选择器）、以及CSS样式和五彩导航的实现。通过实例展示了如何构建用户注册表单和五彩导航菜单。

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

标题<h1>--<h6>
段落<p>
换行<br/>
水平线<hr/>

加粗标签：
<b>加粗内容</b>
<strong>加粗内容</strong>

斜体标签：
<i>斜体内容</i>
<em>斜体内容</em>

视频标签：
<video src="视频路径"></video>

音频标签：
<audio src="音频路径"></audio>

插入超链接及常用相关属性：
href:链接地址
target：目标窗口在何处打开
_blank：保留原页面在新窗口打开

锚链接：
<a name=“锚点名称”>锚（显示在页面上的文本）</a>
<a href=“#锚点名称”>……</a>
-id属性是一个全局属性
因此在各类的标签中添加一个id名，则可以使用锚链接快速定位到目标内容

在网页中使用内联框架：
<iframe>标签的常用属性是:
src：文件的路径
width： “内联框架”区域的宽度
height：“内联框架”区域的高度
frameBorder：设置是否显示框架的边框。(1，0)
name：框架的名字，用来进行识别。
<iframe src="" width="" height=""frameborder="" name=""></iframe>

插入表格及简单样式修饰：
<tr></tr>：
1. 成对出现 2. 嵌套于<table></table>标签内，用来定义一行
<th></th>：
1. 成对出现 2. 嵌套于<tr></tr>标签内，用来定义表头
<td></td>：
1. 成对出现 2. 位于<tr></tr>内，用来定义一个单元格

插入表单及简单样式修饰：
标签：<form action="" method=""> </form>
action：规定当提交表单时向何处发送表单数据值：URL
method：规定用于发送 form-data 的 HTTP 方法。值：get/post
标签：<input type=".." name=".." >
text
password
radio
checkbox
file
submit
button
reset

选择器：
基本选择器：类选择器，标签选择器，id选择器，通配符选择器

表单练习：
<!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>
<h1>用户注册</h1>
<form action="">
用户名：
<input type="text" placeholder="请输入你的真实姓名" maxlength="6" name="usename"><input type="text" value="zhangsan" disabled>
<br />
密码：
<input type="password" name="password" required>
<br />
性别：
<label><input type="radio" name="sex" value="nan">男</label>
<label><input type="radio" name="sex" value="nv">女</label>
<br />
爱好：
<label><input type="checkbox" value="wirte" name="hobby">写作</label>
<label><input type="checkbox" value="dance" name="hobby">听音乐</label>
<label><input type="checkbox" value="r" name="hobby">体育</label>
<br />
邮箱：
<input type="email" name="email" placeholder="请输入你的邮箱">
<br />
用户头像：
<input type="file" multiple="multiple">
<br />
选择你喜欢的颜色：
<input type="color">
<br />
<input type="datetime-local">
<br />
省份：
<select name="province" multiple>
<option value="shanxi">陕西</option>
<option value="guangdong">广东</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br />
所在地区：
<input type="text" placeholder="北京思密达" name="area">
<br />
婚姻状况：
<label><input type="radio" name="hunyin" value="weihun" checked>未婚</label>
<label><input type="radio" name="hunyin" value="yihun">已婚</label>
<label><input type="radio" name="hunyin" value="lihun">离婚</label>
<br />
学历：
<input type="text" placeholder="幼儿园" name="xueli">
<br />
自我介绍：
<textarea name="jieshao" cols="30" rows="10" placeholder="自我介绍一下吧"></textarea><button>提交</button>
<input type="reset">
</form>
</body>
</html>