HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

苹莳

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量70

点赞数

分类专栏：学习打卡文章标签： html web

本文链接：https://blog.csdn.net/weixin_46969113/article/details/118033357

版权

学习打卡专栏收录该内容

10 篇文章 0 订阅

订阅专栏

web前端快速过基础

1. html

概述
- 标签元素属性
- 不区分大小写
- 成对出现
- 标签嵌套
- 层级缩进
  示例：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!编码格式>
	<link href=“sytle.css" rel="stylesheet" />
	<title>百度一下，你就知道</title>
</head>
<body>
	<div id="top">
		<div class="nav">
			<ul>
				<li><a href="#">新闻</a></li>
				<li><a href="#">hao123</a></li>
				"""
</body>
</html>

标签
- 标题 <h1~h6>
- 段落 p
- 段内换行 span
- 预留格式 pre
- 水平线 hr
  示例：

<h1~h6>这是一级标题</h1~h6>
<p>这是段落内容</p>
<br/>		--!这是段内换行
<pre>预留格式-  -保留原有格式</pre>
<span> 这一部分被选择--便于被CSS样式格式化</span>
<hr />	水平线
<!--注释内容-->

超链接 a
- 链接到本站点其他网站
- 连接到其他站点
- 虚拟超链接:只显示超链接的形式不跳转
  示例：

<a href="网址"> 文字或图片 </a>
- 链接到本站点其他网站<a href=“news.html”> 新闻 </a>
- 连接到其他站点<a href=“http://www.baidu.com”> 百度 </a>
- 虚拟超链接<a href=“#”>版块2</a>

图像
- 图像格式 – png – jpg – gif
- 插入图像 img标签
- 绝对路径与相对路径
- src=路径+文件名
  示例：

<img src="w3school.gif" alt="111"/>绝对路径
<img src="c:/file/111.png">相对路径

区域列表表格
- 区域 --div
- 无序列表(< u1 > ) > (< li >)*3
- 有序列表
- 表格 --table>tr2>td3
- 表格 table < th > 表格标题

<div align="center">
	<h1>标题<h1>
	<p>段落 </p>
	<ul>
	<li>HTML1<li>
	<li>HTML2<li>
	<li>HTML3<li>
	</ul>
	<ol>
	<li>HTML1<li>
	<li>HTML2<li>
	<li>HTML3<li>
	</ol>
	<table>
	<tr>
	<td>data </td>
	<td>data </td>
	<td> data</td>
	</tr>
	<tr>	<th>biaotou1 </th>			<th>biaotou2</th>			<th>biaotou3 </th>		</tr>
	<tr>	<td>data 	 </td>			<td>data    </td>			<td>data</td>			</tr>

</table>
</div>

表单：
文本框： text
密码： password
提交按钮：submit
重置按钮：reset
单选框： radio --当设置 checked=“checked” 时，该选项被默认选中
复选框：checkbox
下拉列表：select option – selected=“selected”：被选择的那一项
文本域：textare --ros=“行数” --cols=“列数”

<input type="" value=""/> 
	text 
	password
	submit
	reset
	radio
	checkbox
	<select selected="selected">
			<option>选项1-5</option>
	</select>
	<textare --ros="行数" --cols="列数">文本(在这里输入内容)</textare>

<form>
	用户名：<input type="text" name="username" />
	<br/>
	密  码: <input type="password" name="usrpsd" />
</form>