HTML基础

最新推荐文章于 2024-09-11 16:24:10 发布

风华正茂呀

最新推荐文章于 2024-09-11 16:24:10 发布

阅读量192

点赞数

分类专栏： html+CSS学习日记文章标签： html css3

本文链接：https://blog.youkuaiyun.com/weixin_42149770/article/details/104329715

版权

html+CSS学习日记专栏收录该内容

9 篇文章

订阅专栏

一、HTML常用标签

1. 文本标题：

【格式】：<h#><h#>，#为1~6，分别为6级标题

2. 字体及字符实体

语法	说明
<i></i> 或<em></em>	倾斜标记
<b></b> 或<strong></strong>	加粗标记
<u></u>	下划线标记
<br />	空标记，用来设置字体换行
<hr />	空标记，用作水平线
<p></p>	段落标记，表示一个段落

什么是字符实体？
在往HTML文档中写入特殊字符，如“<”、">"、“&”等要特殊使用的代码，浏览器会用HTML命令对这些特殊代码进行翻译。
往网页中输入特殊字符，需在HTML代码中加入以&开头的字母组合或以&开头的数字

常用的有：
  不换行空格
>右尖括号
<左尖括号
&copy备案中图标

3.常用元素

<div></div>
【说明】：可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具、并且不使用任何格式与其关联
<span></span>
【说明】：他的文本节点可以是某一小段文本或者是某一个字

4.列表的应用

无序列表（ul）
【语法】：
<ul>
　　<li>内容<li>
</ul>
有序列表（ol）
【语法】：
<ol>
　　<li>内容<li>
</ol>
自定义列表（dl）
【语法】：
<dl>
　　<li>名词<li>
　　<li>解释<li>
</dl>

5.超链接和图像

超链接
【语法】：<a href=“目标文件路径” alt=“替换文本” title=“提示文本”>链接文本/图片<a>
空链接：<a href="#”><a>
插入图像
【语法】：<img src=“目标文件路径” alt=“图片替换文本” title=“图片标题”/>

二、表格元素

1.表格的语法

<table>
　　<tr>
　　　<td></td>
　　</tr>
</table>
说明：
一对tr表示一行；一对td表示一列

2.表格的相关属性

名称	含义	备注
width	表格宽度
height	表格高度
border	表格边框
bordercolor	边框色
cellspacing	单元格与单元格之间的间距
cellpadding	单元格与内容之间的空隙
align	表格对齐方式	left\right\center
valign	垂直对齐	top\bottom\middle
colspan	所要合并的单元格列数
rowspan	所要合并的单元格行数

实例：简历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>个人简历</title>
	</head>
	<body>
		<table border="3px" cellspacing="0">
			<col width="90px">
			<col width="90px">
			<col width="90px">
			<col width="90px">
			<col width="90px">
			<col width="90px">
			<col width="150px">
			<tr height="45px">
				<td colspan="7"></td>
			
			</tr>
			<tr height="45px">
				
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="3"> 照片</td>
				
			</tr>
			<tr height="45px">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
				
			</tr>
			<tr height="45px">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
				
			</tr>
			<tr height="45px">
				<td>毕业院校</td>
				<td colspan="6"></td>
		
			</tr>
			<tr height="45px">
				<td>求职意向</td>
				<td colspan="7"></td>
				
			</tr>
		</table>
		
	</body>
</html>

三、表单元素

1.表单域

【语法】：<form name=“表单名称” method=“post/get” action" "><from>

2.表单控件

名称	用法
文本框	<inpute tpe=“text” value=“默认值”/ >
密码框	<inpute tpe=“password” />
提交按钮	<inpute tpe=“submit” value=“按钮内容” />
重置按钮	<inpute tpe=“reset” value=“按钮内容”/ >
单选框	<inpute tpe=“radio ” name=” " />
复选框	<inpute tpe=“checkbox” name=" "/>
按钮	<inpute type=“button” value=“按钮内容”/>