[前端基础]HTML+CSS入门(一)

目录

HTML结构

HTML注释

HTML转义字符

HTML基础标签

HTML列表

有序列表

无序列表

定义列表

HTML表格

HTML表单


HTML结构

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

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

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

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

<meta charset="utf-8">:字符编码,utf-8

HTML注释

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

HTML转义字符

  • &lt;(<)
  • &gt;(>)
  • &nbsp;( )(空格)(html空格space无论多少个都只显示一个,想要多个空格只能使用转义字符)
  • &apos; 表示单引号(' ')
  • &quot;双引号(" ")
  • &amp;与(&)

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;
  • <tbody>:表示表格主要内容;
  • <tfoot>:表示表格底部;
  • tr: 是 table row 的缩写,表示表格的一行。
  • td:是 table data 的缩写,表示表格的数据单元格。
  • th:是 table header的缩写,表示表格的表头单元格。

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

border="1px"  cellspacing="0px" 可添加外边框取消内边框

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";

  • 将表单的数据提交到服务器必须要为表单项指定一个name属性;
  • disabled属性:设置该文本框不可输入任何内容;

密码框:type="password";

label标签:<label></label>:绑定文字和表单控件的关系,增大表单控件的点击范围


单选框:type="radio";

  • name属性:将单选按钮进行分组,name相同则为同一组按钮,相同name下单选生效;
  • checked属性:默认选中该选项;

多选框:type="checkbox";

  • value属性代表该选项的名称;
  • checked属性:设置默认选中项;

邮箱框:type="email"
文件:type="file"
日期:type="date":可以设置min等
下拉列表

  • select标签创建下拉列表
  • option标签添加列表项
  • name属性指定给select标签,value属性指定给option
  • selected属性设置默认选项

按钮:type="button"

  • <button type="submit">提交按钮
  • <button type="reset">重置按钮
  • <button type="button">普通按钮,配合js