[前端基础]HTML+CSS入门（一）

行云乱雨

已于 2023-08-02 09:00:24 修改

阅读量49

点赞数

分类专栏：前端学习文章标签： html5 css3

于 2023-06-28 20:51:28 首次发布

本文链接：https://blog.csdn.net/weixin_44275351/article/details/131377858

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML结构

一个HTML文件分为head和body两部分，主要内容在body里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热门活动页面</title>
	</head>
	<body>
	</body>
</html>

<! DOCTYPE html>：文档声明，用来告诉浏览器当前的版本，不区分大小写，放在开头。

<title>：title标签的内容会作为搜索结果的超链接显示在标题栏

HTML注释

注释：，快捷键CTRL+/，注释内容不会显示在页面中，//和/* */在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用

HTML转义字符

<(<)
>(>)
 ( )（空格）(html空格space无论多少个都只显示一个，想要多个空格只能使用转义字符)
' 表示单引号（' '）
"双引号（" "）
&与（&）

HTML基础标

一些基础常见标签：

标题标签:一级标题<h1></h1>，二级标题<h2></h2>...六级标题<h6></h6>

换行标签:<br />换行

横线标签<hr/>：横线

段落标签<p>:<p>段落内容</p>

span标签：<span> 用于对文档中的行内元素进行组合。

div标签：<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

超链接标签：<a href=""></a>，""里填写跳转路径，#代表跳转本页面

图片标签：<img src="" alt="" title=" " />，src填写图片地址，alt填写图片未加载成功显示的内容，title填写鼠标悬停图片上方要显示的文字

音频标签：<audio src=""></audio>，音频，src填写地址

视频标签：<video src=""></video>，视频，src填写地址

长文本标签：<textarea></textarea>设置长文本

文本格式化标签：

左边的标签自带强调含义，优先使用左边

更多标签可参考其他网站：HTML 标签参考手册 (w3school.com.cn)

HTML列表

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

type="1/A/a/I/i"，无样式：style="list-style-type:none"

无序列表

<ul>
   <li>第一项</li>
   <li>第二项</li>
</ul>

圆点：style="list-style-type:disc"，圆圈：style="list-style-type:circle"，正方形：style="list-style-type:square"，无样式：style="list-style-type:none"

定义列表

<dl>
   <dt>标题</dt>
   <dd>详情</dd>
</dl>

HTML表格

<table border="1px"  cellspacing="0px" >
        <thead>
			<tr>
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
			</tr>
        </thead>
        <tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
			<tr>
				<td>总计</td>
				<td colspan="3"></td>
			</tr>
        </tbody>
</table>

<caption>:设置表格标题；
<thead>:页眉，表示表格头部，用来放头部的tr，th；
<tbody>:表示表格主要内容；
<tfoot>:表示表格底部；
tr：是 table row 的缩写，表示表格的一行。
td：是 table data 的缩写，表示表格的数据单元格。
th：是 table header的缩写，表示表格的表头单元格，th和theader有区别。

thead和tbody不能合并，删除单元格是指把后面被合并的<tr>或<td>删除

border="1px" cellspacing="0px" 可添加外边框取消内边框(html5里这些行内属性都过时了，建议用css修改样式)

HTML表单

<form action="#" method="">
			<label>电子邮箱：<input type="email"/></label><br/>
			<label>设置密码：<input type="password"/></label><br/>
			<label>真实姓名：<input type="text"/></label><br>
			性别：<input type="radio" name="sex" checked/>男
			<input type="radio" name="sex"/> 女<br/>
			
			生日：<select name="" id="">
				<option>1999</option>
				<option>2000</option>
			</select>
			年
			<select>
				<option>1</option>
				<option>2</option>
			</select>
			月
			<select name="" id="">
				<option>1</option>
				<option>2</option>
			</select>
			日<br/>
			<img src=""/><a href="#">看不清换一张？</a><br/>
			<p>验证：<input type="text"/></p>
			<input type="image" src=""/>
</form>

action：跳转页面路径

method：get/post

input类型：

文本框 type="text";