HTML 重点标签,属性
文本标签
1.换行标签<br>
2.加粗字体<strong>
3.斜体<em></em>
斜体和加粗标签可以嵌套使用
4.给文本加删除线标签<del>删除线</del>
5.给文本增添下划线标签<ins></ins>
6.<textarea>
文本域,当输入内容较多时可以采用文本域;文本框的大小可以调节。(可以用cols=“每行字数” row=“行数来限制文本框的内容大小”)
7<label></label>
标签用于绑定一个元素,当点击<label>
标签内的文本时,浏览器会自动的将焦点光标转到或者选择对应的表单元素上,用来增加用户体验。
使用语法
<label for="1">one</label> <input type="radio" name=" " id="1''>
8.<placeholder>
标签是用户的文本框为输入内容时,默认显示的灰色文字,作为提示。
盒子标签
div标签,div是块级元素内容(一个<div></div>
所含文本内容独占一行)
span标签,span是行级元素内容(一个或几个span></span>
标签内容共占一行)
列表标签
1.有序列表<ol></ol>
type是序号类型,若为a的话则以:a、b、c……进行排列
start是从那个序号开始排,2则是第二个开始
type是序号类型,若为a的话则以:a、b、c……进行排列
start是从那个序号开始排,2则是第二个开始
2.无序列表<ul></ul>
type中默认为disc(disc=discircle),还有两个值,分别为square(实体方块),circle(空心圆)
<select>
元素(下拉列表)
<select>
元素定义下拉列表:
<option>
元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
表格标签
表格由
<table>
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由<td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:<table border="1">
添加border属性即可
cellpadding=" “表示表格内元素与表格框间的距离。
cellspacing=” ''表示表格框之间的间距。
合并单元格
1.跨行合并;
rowspan=“合并单元格的的个数”
2.跨列合并;
colspan=‘‘合并单元格的个数’’
目标单元格;
跨行:则以上面的单元格为目标单元格
跨列;则以左边的单元格为目标单元格
合并完删除多用单元格代码即可。
表单标签
<form>
元素定义 HTML 表单
<input>
元素是最重要的表单元素。
元素有很多形态,根据不同的 type 属性。
type可以加的属性;
1.input type = “text”这个是输入框的意思;
2.input type = “password”这个是密码框的意思,默认是暗文(可以加value,可更改输入框中的内容);
3.input type = “submit”是提交的组件,也就是登录;
4.input type = “submit” value = “login”这样就改变了提交框的值;
4.input type = “radio”是单选框;
5.input type = “checkbox”是复选框;
6.input type = "reset"是重置按钮;
7.input type = "image"定义图像形式提交按钮
8.input type = "hidden’'定义隐藏输入字段
9.input type = "file"定义输入字段和“浏览”按钮供上传文件。
name属性;是表单的名字;当要实现单选,或者多选时,所选项的name的值相同才行,否则无法实现。
超链接
a标签,是 anchor ——> 锚
标签的功能
语法target = “_blank”意思是在新标签中打开这个地址;去掉后则链接所打开的页面会在当前显示。
图片导入
img
src文件名 style图片大小 alt图片占位符 title图片提示符
img 的地址分:
1)网上 url
2)本地的绝对路径
3)本地的相对路径
如 html 和图片在同一文件下,是一种相对关系,相对路径,写法img src = “123.jpg”
如 html 和图片不在同一文件下,是绝对路径,写法img src = “D:/a/b/c/123.jpg”
就此可以制作一张简单的表单;代码如下;
<html>
<form>
<table
border="1"
cellpadding="10"
cellspacing="0"
bgcolor="#82c8a0"
align="center"
>
<tr>
<td colspan="4" align="center" style="background-color: #1f6e47">
个人信息
</td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" /></td>
<td rowspan="2">性别:</td>
<td rowspan="2">
<select style="width: 200; height: 50">
<option selected="selected">--选择性别--</option>
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td>手机号码:</td>
<td><input type="text" placeholder="仅允许输入数字" /></td>
</tr>
<tr>
<td>政治面貌:</td>
<td>
<select>
<option selected="selected">--请选择政治面貌--</option>
<option>群众</option>
<option>共青团员</option>
<option>党员</option>
</select>
</td>
<td>方向;</td>
<td>
<label for="前端">前端</label>
<input type="radio" name="方向" id="前端" />
<label for="后台">后台</label>
<input type="radio" name="方向" id="后台" />
<label for="全栈">全栈</label>
<input type="radio" name="方向" id="全栈" />
</td>
</tr>
<tr>
<td>账号:</td>
<td><input type="text" name="账号" /></td>
<td>密码:</td>
<td><input type="password" name="密码" /></td>
</tr>
<tr>
<td>特长:</td>
<td colspan="3">
<textarea name="特长" style="width: 450"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="reset" value="重置" /></td>
<td colspan="2" align="center"><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</html>
算是学习html基础的一个成果了。