html的介绍
本菜鸡总结了一下本周学习的web前端三大核心技术中的html部分,文章包含html的定义,基础骨架,文字标签的用法和实操案例,不足之处希望大佬指正!
html的定义
html指的是超文本标记(标签,元素)语言(Hyper Text Markup Language)。
html的骨架标签
骨架标签是html的最基本组成, 如下图所示:
<html>
<head>
<title> My cool project title </title>
</head>
<body>
</body>
</html>
新建html文件的时候会生成这些骨架标签:
- html 标签我们称它为根标签,html标签是网页中最大的标签
- meta 标签来设置网页的字符集,其中 默认是utf-8 中文字符集
- title 标签 标签设置网页的标题
- body 标签 设置网页的主体内容部分
常用的html 标签
标题标签
从 <h1>
到 <h6>
分为6级, 呈现依次减小的效果,每个标签都独占一行
// 下面列出了从第一级标签到第四级标签
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
布局标签
布局标签没有语义, 仅仅用于页面的布局,在页面中较为常见。
- div: 俗称大盒子,独占一行
- span:俗称小盒子,一行可以放置多个
html段落
通常我们用 <p>
标签来定义, 如果<p>
标签用的合理,即语义化很成功,可以在搜索引擎处于靠前的位置。
<p>我是第一段</p>
<p>我是第二段</p>
img标签
<img>
标签用于插入图片, 例如:
<img src=”...” width=”...” height=”...” title=”...” alt=”...” />
其中
- src 代表资源,它后面的值应该写想要加载的那张图片的名字。
- width代表宽度(横向距离), width代表高度(纵向距离), 值得注意的是如果你只设置宽或者高,你未设置的那个值它会按照原图的比例进行缩放。
- title 表示鼠标悬停时显示的文字。
- alt 有两种含义,(1)当图片为能正常加载到时候,alt里的文字会被看到。(2)网页阅读器读取此内容给视障用户听,增强用户体验。
html文字标签
form标签
form表单标签里面就是所有用户填写的表单数据;表单可以包含许多不同类型的表单元素,比如:输入框, 单选框, 复选框,提交按钮等等。所有的表单元素都必须要放到一个form标签里面。
<form action="xxx.jsp" method="post" >
</form>
其中,
action=“xxx.jsp” 把表单数据提交给哪一个后台程序去处理
method=“post” 传递数据时候的方式方法,post代表隐式提交数据;get明文传送数据
input 标签
input标签包含多种 type类型, 通过设定不同的类型值我们可以实现输入框, 单选框, 复选框按钮等等,代码如下
- 输入框, 我主要介绍文本输入框和密码输入框两种,其中文本输入框用来处理单行输入,密码输入框相比文本输入框可以对输入的内容做掩码处理,比如说显示为星号。代码如下所示。
用户名:<input type="text" placeholder="请输入用户名" /> <br /> 密码框:<input type="password"> <br />
- 单选框, 如果我们想要设置默认选中状态我们可以设置checked=“checked”
<input type="radio" name="xb" id="nan" checked="checked" /> <label for="nan">男</label> <input type="radio" name="xb" id="nv" /> <label for="nv">女</label>
- 复选框
你的爱好: <input type="checkbox" id="cs" checked="checked" /> <label for="cs">测试</label> <input type="checkbox" id="cf" /> <label for="cf">吃饭</label> <input type="checkbox" id="sj" /> <label for="sj">吃饭 </label> <input type="checkbox" id="ddd" checked="checked" /> <label for="ddd">打豆豆</label> <br />
- 按钮, 通过设置
type="buttton"
我们可以实现不同的按钮,注意这些按钮需要js配合才能实现其他功能。<!-- 需要js配合才能实现其他功能 --> 普通按钮:<input type="button" value="按钮" /> <br /> <!-- 点击后让表单里面的数据恢复默认值 --> 重置按钮:<input type="reset" value="我是重置" /> <br /> <!-- 点击后可以让表单提交给指定的后台处理 --> 提交按钮:<input type="submit" value = "我是提交"/>
下拉框
类似的我们用<select>
定义下拉列表,<option>
表示下拉列表的选项, 如果我们想让其中的一个选项作为默认的元素,我们需要添加<selected>
属性。
来自:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">深圳</option>
</select>
文本域
这里你可以定义这个文本域的行数<rows>
和列数<cols>
意见:<textarea name=" id=" cols="30" rows="10"></textarea>
案例
通过上面介绍的内容,我们可以实现一个简单的收集信息的表单,如下图所示。
源代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form 表单标签里面就是用户所有填写的数据
action 把表单数据给给某个后台程序去处理
method="post" post表示隐式传递
-->
<form action="xxx.py" method="get">
用户名:<input type="text" placeholder="请输入用户名" />
<br />
密码框:<input type="password">
<br />
性别:
<!-- 让男是选中状态 -->
<input type="radio" name="xb" id="nan" checked="checked" />
<label for="nan">男</label>
<input type="radio" name="xb" id="nv" />
<label for="nv">女</label>
<br />
你的爱好:
<input type="checkbox" id="cs" checked="checked" />
<label for="cs">测试</label>
<input type="checkbox" id="cf" />
<label for="cf">吃饭</label>
<input type="checkbox" id="sj" />
<label for="sj">吃饭 </label>
<input type="checkbox" id="ddd" checked="checked" />
<label for="ddd">打豆豆</label>
<br />
来自:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">深圳</option>
</select>
<br />
<!--
textarea 文本域
测试细节:
1. 要测试三大主流的浏览器
2. 文本右下脚拖拽按钮要禁用
-->
<!-- 下面这行代码暂时不用记住 -->
<style type="text/css">
textarea{resize: none;}
</style>
意见:<textarea name=" id=" cols="30" rows="10"></textarea>
<br />
<!-- 需要js配合才能实现其他功能 -->
普通按钮:<input type="button" value="按钮" />
<br />
<!-- 点击后让表单里面的数据恢复默认值 -->
重置按钮:<input type="reset" value="我是重置" />
<br />
<!-- 点击后可以让表单提交给指定的后台处理 -->
提交按钮:<input type="submit" value = "我是提交"/>
</form>
</body>
</html>