html初识
一、网页相关概念
1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
3.HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等
二、web标准
结构(网页元素的整理-html),表现(颜色等-css),行为(定义及交互-js)
三、标签的语义
每个标签都有自己的语义,记住标签的语义,把合适的标签放在合适的地方,可以让页面结构更清晰。
四、html基本结构标签
1、<!DOCTYPE html>文档类型声明 (采取什么版本显示网页)位置必须在文档的开头
2、<lang> 定义当前文档的语言 en英语 zh-CN中文
3、charset 字符集 可以通过<meta>标签中的charset属性来定义文档文字类型 (UTF-8万国码)
五、常用标签及字符
1、标题标签:<h1>-<h6>特点:独占一行,大小依次递减,都加粗
2、段落标签:<p></p>特点:文本在一个段落中会根据浏览器窗口的大小自动换行,段落跟段落之间有空隙
3、换行标签:<br/>特点:单标签
4、特殊字符:  ;空格 <;小于号 >;大于号
5、注释:<!--内容-->ctrl+/快捷键
六、文本格式化标签(突出重要性)
1、<strong></strong>或者<b></b>加粗(推荐用strong)
2、<em></em>或者<i></i>倾斜(推荐用em)
3、<del></del>或者<s></s>删除线(推荐用del)
4、<ins></ins>或者<u></u>下划线(推荐用ins)
七、div和span标签
1、<div></div>特点:独占一行 大盒子
2、<span></span>特点:一行上可以有多个 小盒子
八、图像标签
<img src="文件名"/> 注:src是<img>标签的必须属性,用于指定图像文件的路径和文件名
属性:alt 替换文本,图像不能显示时出现
title提示文本,鼠标放在图像上显示的文字
width宽,height高(宽高只设置一个的时候,另一个会等比例变化)
注:属性都要写在图像标签名后面,属性之间没有先后顺序,但属性之间必须有空格
九、html文件路径
1、相对路径:图片相对于HTML页面的位置 同一级只用写图像名 下一级要将保存图像文件夹的名字加上上一级的名字 上一级../文件名
2、绝对路径:从盘符开始到图片名或者网址
十、超链接标签
分类:1、外部链接
2、内部链接,目录文件夹内的相互跳转,直接写文件名
3、空链接<a href ="#"</a>
4、下载链接 地址链接的是文件 xx.exe或者是 zip等压缩包的形式
5、网页元素的链接
6、锚点链接<a herf="#名字"></a> 再去跳转的目标位置标签里设置id名字
表格和列表
一、表格(展示数据)标签
1、<table></table>定义表格的标签
2、<tr></tr>定义表格的行
3、<td></td>定义单元格
4、<th></th>表头单元格标签 加粗居中显示
二、表格属性
align 对齐方式
border 边框
cellpadding 内容与边框的距离
cellspacing 单元格之间的距离
三、表格结构标签
<thead>头部标签 <tbody>主体标签
四、合并单元格
跨行合并(上下) rowspan=""
跨列合并(左右)colspan=""
目标单元格:跨行最上,跨列最左
五、列表(布局)标签
1、无序列表:<ul><li></li></ul>
特点:列表之间没有顺序,<ul>里面只能放<li>,不能放其他标签和文字,<li>里面放什么都可以,带有自己的样式属性可以用css来设置
2、有序列表:<ol><li></li></ol>
特点:跟无序列表一样
3、自定义列表:<dl>
<dt>名词</dt>
<dd>解释名词</dd>
</dl>
六、表单
1、表单(收集用户信息)标签
2、表单域:<form></form>将表单元素信息提交给服务器
属性: action=“url地址” method=“提交方式” name=“表单域名称”
3、input输入表单元素 (收集用户信息)<input type="属性值"/>
①text文本框 ②password密码 ③radio单选按钮(必须有相同的名字,才能实现多选一)
④checkbox复选框(必须有相同的名字)⑤value=“值”
⑥单选按钮和复选按钮可以用checked属性,当页面打开的时候自动勾选
⑦maxlength限制长度 submit提交按钮(可以通过value更改内容) reset重置按钮
⑧button普通按钮,启动js
⑨file文件域(上传文件)
⑩label标签<label for="值">内容</label> <input id="值">将元素进行捆绑
4、select下拉表单元素
①格式:<select><option></option></select>
②selected默认选中
5、textarea文本域表单元素(输入内容较多时)
①格式:<textarea>显示的文字</textarea>
②cols=“”(每行的字数)rows=“”(每列的字数)