html 学习

1-html

html是一种超文本标记语言,由各种标签组成,决定页面上有什么内容

  • html 第一行必须是 <!DOCTYPE html>,代表声明该文档是一个h5文档
  • html 是由一个一个标签组成
    • 标签格式: <标签名> </标签名>
  • 书写 html 标签,可以先成对写好标签,在写内容,防止遗漏

1.1-html页面的基本格式

<!--文档声明需要放在第一行-->
<!DOCTYPE html>
<!--html标签写在最外面-->
<html>
    <!--head标签,表示开头,可在标签内设置页面信息,字符集,样式等-->
  	<head></head>
    <!--body标签,页面真正展示信息的标签-->
	<body></body>  
</html>

1.2-html标签的分类

  • 块元素
  • 默认占满整行
  • 设置宽度和高度都有效果
  • 默认高度随内容填充,默认宽度占100%
  • 常见的块元素有: div / p / ul / li / ol / h1~h6 等
  • 行元素
    • 默认不会占满整行
    • 设置宽度和高度都无效,宽度和高度只随内容填充
    • 常见行元素有: span / em / strong / a 等
  • 行内块
    • 默认不会占满整行
    • 设置宽度和高度有效果
    • 默认宽度和高度随内容填充
    • 常见行内块元素有 : img / input 等

1.3-html常用标签

1.3.1基础标签
标签名作用用法
<html></html>一个html文档有且只有一个html外层标签块元素
<head>头部标签,页面信息在head内部实现
<title>定义文档的标题需要写在head标签内,可以看做是必写标签
<meta><meta/>设置页面的配置信息可设置 charset name 等属性
<body>所有页面中的内容
<h1> to <h6>h1 到 h6标签 显示出来的字体大小不同,通常用来定义标题
<br><br/>换行不能用br来进行上下距离调节
1.3.2格式标签
标签名作用用法
<strong>字体默认加粗标签,强调重点<strong>我很强壮</strong>
<em>斜体<em>斜体</em>
1.3.3表单标签
标签名作用用法
<form>表单元素,用于前后端交互的标签,可设置两个重要属性 action(请求地址) 和method(请求方式)<form action = "form_action.asp" method = "get"></form>
<input>定义输入,有一个重要属性 type, 可取值 text(文本框)/password(密码框)/number(数字框)/date(年月日选择框)/time(时分秒选择框)/file(上传文件按钮)/checkbox(多选框)/radio(单选框)/button(按钮)(已废弃)/reset(重置)(已废弃)/submit(提交)(已废弃)等,将input list属性的值=datalist 的id值,可以提示输入表格内容<input type = "text">
<datalsit>定义下拉列表<datalist id = "a"></datalist>
<option>定义选择列表中的选项,每一个option都有一个value为选中的值<option value = "a">a</option>
<button>按钮标签,通过type值不同来表示不同按钮功能, 可取值 reset/submit等,submit提交后会将信息提交到form的action中<button type = "reset"> 重置</button>
<select>定义下拉列表,列表选项为option<select><option value ="volvo">Volvo</option></select>
<label>定义input元素的标注,如input type为checkbox 时,可使用label包裹,点击字体也可选中勾选框<label>足球<input type = "checkbox"></label>
1.3.4框架标签
标签名作用用法
<frameset>框架已淘汰
<iframe>内联框架,即在一个页面中嵌套另一个窗口页面, 的 target 值等于 内联框架的 name 值,可以在内联框架中跳转<iframe name = "c" src = "https:www.baidu.com"><br/><br/> </iframe>
1.3.5图像标签
标签名作用用法
<img>定义图像<img src="/i/eg_tulip.jpg"/>
1.3.6链接标签
标签名作用用法
<a>1、超链接:超链接中的内容一定要写,否则显示不出链接点击 2、锚点:从当前标签跳转到锚点标签<a href = "https:www.baidu.com">百度</a>
1.3.7列表标签
标签名作用用法
<ol>定义有序列表,ol 标签包裹li标签,li为ol的子元素ol 可 定义 type属性,可取值 :1、A 、a 、I 、i 等,列表排序方式分别为: 阿拉伯数字、大写字母、小写字母、大写罗马数字、小写罗马数字
<li>定义列表的项目
<ul>定义无序列表,ul 标签包裹li标签,li为ul的子元素
<dl>定义自定义列表
<dt>定义自定义列表的表头
<dd>自定义列表的项目
1.3.8表格标签
标签名作用用法
<table>定义表格标签<table></table>
<thead>表头,即表格的第一行字段<thead>父元素为table</thead>
<tbody>表体,表字段内容<tbody>父元素为table</tbody>
<tr>表的行<tr>父元素为tbody</tr>
<td>表每一行的单元格<td>父元素为tr</td>
1.3.9样式标签
标签名作用用法
<div>页面中最常用的标签,定义一个块块元素
<span>定义文档中的节行元素
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页