丸子学HTML（学习半小时 - 基础）
2023-11-09 本文已影响0人
丸子小姐__不懂爱
告诉我什么是HTML
HTML：超级文本标记语言，在浏览器运行的一种标记语言。
最最最基本的结构
别问~ 长↓↓↓这样
<!DOCTYPE html> #声明文档类型，
<html lang="en"> #是所有标签的容器，lang表示语言，表示整个文档的内容以什么语言为主
<head> #页面结构的头部，包含辅助显示的标签
<meta charset="UTF-8">
<title>Title</title> #页面的标题，在标题栏显示的内容
</head>
<body> 页面结构的主体，包含在页面中显示的标签
do something
<!--注释内容-->
</body>
</html>
简短描述下含义
<!DOCTYPE>:设置当前文档使用的标准，建议使用HTML5的类型
HTML标签：用于包裹页面上所有的其他标签
head标签：用于存放title，meta，base，style，script，link标签，这些标签都是用来辅助显示的标签，每个head标签必须有一个title标签
body标签：用于存放所有的页面上的结构标签
title标签：用于设置页面的标题、同时提高SEO的权重
meta标签：设置页面上的字符集（编码格式），utf-8,gb2312
注释内容:HTML注释，给代码添加的代码说明性的文字，或者使一些没有必要去掉它的作用
标签了解一下
我们在浏览网页时，看到的内容，都是由成对的标签组成，如下图
标签组成
1) 基础标签
不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p> #独占一个段落
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<br> #换行
<!--水平线--><hr> #就是单独个一个水平线
记住这些标签的样子和效果
2) 特殊字符
#空格 #°；°
> #> #± ±
< #< #÷ ÷
& #& #× 乘号
¥ #¥ #² ²平方
© #版权标识© #³ ³立方
® #注册
记住他们的样子
3) div标签和span标签 （没有任何语义的标签）
<div></div> # div布局标签
<!-- 在页面上单独独占一行，如果不设置宽度，默认占一行，通常作为容器布局的时候使用 -->
<span></span> #span标签
<!-- 一行可以放多个，显示大小由内容决定 -->
4) img 图片标签
<img src = 'xxx.png' alt="这是xxx图片" title="xxx" width="700" height="700">
<!--src=图片的路径，alt=图片的描述，在图片加载失败后显示，
title=图片描述，在鼠标悬停在图片上时会显示-->
通过width，height来设置宽和高，，若只设定一个，会自动等比例缩放，src的路径又分为两种：网页上的一个图片路径和本地的一个图片路径
<img src="../images/avatar.png" title="动漫少女头像" alt="这是一张头像图片" width="160" height="160">
效果
5) a跳转标签
<a id="zjm" href="11.html#iii" target="_blank"><h1>喜欢我？</h1></a>
<!--a标签的跨页面进行定位-->
<!--href=目标页面的路径,a标签中一定要有内容,target属性设置的是，a标签的跳转方式，
默认值为_self，不保留当前页面，跳转；_blank，保留当前页面，打开一个新的窗口进行跳转-->
<a href="#zjm">点我</a>
上面的a标签的id为zjm，如果我点击‘点我’，页面会定位到上面的a标签
6) 列表标签
<ul type=""> #无序列表，type里面可以给参数，circle，square，，，，代表每行前面的图形
<!--unorder list，有ul标签，就必须有li标签，而且只能有li标签-->
<li>苹果</li>
<li>香蕉</li>
<li><h1>西瓜</h1></li>
</ul>
<ol type="" start=""> #有序列表，type的参数有1，a，A，i，I，代表以那种数字来排序
<!--order list-->
<li>一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
</ol>
<dl>
<!--definition list--> #自定义列表，存在明显的从属关系
<dt>手机品牌</dt>
<dd>苹果</dd>
<dd>三星</dd>
<dd>小米</dd>
<dt>电脑品牌</dt>
<dd>苹果</dd>
<dd>三星</dd>
<dd>小米</dd>
</dl>
记住它们的样子
7）table表格标签
<table border="1" width="500" height="300" cellpadding="10" cellspacing="2" align="center">
<!--border 表格边框的宽度
width 表格的高度
height 表格的高度
cellspacing 边框之间的间歇
cellpadding 表格中的单元格中的内容跟边框的距离
align 水平位置，left center right-->
<caption><h1>帅哥排行</h1></caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tfoot>
<tr align="center">
<td >总结</td>
<td colspan="3"></td>
<!--rowspan='2' 表示独占列的2个单元格
colspan = '2' 表示独占行的2个单元格-->
</tr>
</tfoot>
<tbody>
<tr align="center">
<td>1</td>
<td >彭于晏</td>
<td>男</td>
<td>49</td>
</tr>
<tr align="center">
<td>2</td>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr align="center">
<td>3</td>
<td>周杰伦</td>
<td>男</td>
<td>45</td>
</tr>
</tbody>
<!--table 表格
tr 行
td 行内的单元格
th 表头
caption 表的标题
thead 容纳表的表头
tbody 容纳表的主体内容
tfoot 容纳表的尾巴，一般不出现-->
</table>
一个简单的表格效果
8）表单标签
<!-- action为表单提交的目标地址，method为提交方法，为get时，可以在目标网页的网址上看到提交内容，若为post，就看不到 -->
<form action="http://127.0.0.1:xxxx" method="get">
<!-- 文本框 -->
<label for="username">昵称：</label><input type="text" id="username" name="username" placeholder="请输入您的昵称" value="爱你"><br>
<!-- label标签，加了之后，点击密码两个字，输入框自动获取光标 密码框-->
<label> 密码：<input type="password" name="pwd" placeholder="请输入6位密码"><br></label>
<!-- 单选框，在同一单选框中，name值要相同；checked是默认选项 -->
性别：<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">不详<br>
<!-- 多选框 -->
爱好：<input type="checkbox" name="hobby" checked="checked" value="a">打游戏<input type="checkbox" name="hobby" value="b">吃饭
<input type="checkbox" name="hobby" value="c">睡觉<br>
<!-- 普通按钮 -->
<input type="button" value="登录"><br>
<!-- 重置按钮，点击之后，表单内所有输入内容被重置 -->
<input type="reset"><br>
<!-- 提交按钮，点击之后，会把整个表单内容让目标地址提交 -->
<input type="submit"><br>
<!-- 图片 -->
<input type="image" src="张钧蜜.png" width="50"><br>
<!-- 下拉框，multiple为布尔属性，设置后为多选下拉框，不设置默认单选 -->
出生年月：<select name="year" multiple=‘Ture’>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value='1997' selected="selected">1997</option>
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>月
<select name="day">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
</select>日<br>
<!-- 文本域 ，筐的大小可以拉大 -->
文本域：<textarea name="xuanyan"></textarea><br>
<!-- 日期 -->
日期：<input type="date" name="date"><br>
<!-- 时间 -->
时间：<input type="time" name="time"><br>
</form>
看看都是什么样子
