html基础

1.浏览器
作用：向服务器发起请求，缓存浏览过的数据，渲染数据
查看浏览器缓存数据：浏览器输入’chrome://version‘即可

2.认识html

  • 纯文本文件：特点是只能写入字符 （常用文本文件如txt），相比非纯文本文件占用更少的内存
  • 非纯文本文件：可写入文件，插入图片，音频等（如word）
  • 超文本标记语言：超文本即不仅仅可显示文字，还可显示图片，视频等；标记可理解为标签
    拓：
    h1标签的作用：向网页中插入一级标题

3.开发工具
Sublime:http://www.sublimetext.com/3 (下载地址)
常用快捷键：

  • Ctrl+N：新建文件
  • Ctrl+s:保存
  • Shift+!==>tab:快速生成网页框架
  • tab:写入标签名后，按tab键自动补齐，快速生成标签；也可同时生成多个标签：h1*40 => tab键
    如tab键无法快速生成html框架，可按如下操作：
  • Ctrl + Shift + P打开命令板，install package control，等待安装完成
  • 再次通过Ctrl + Shift + P打开命令板，然后输入pc,选择install package，之后再输入Emmet回车安装插件。

4.基本标签
标签等级：

  • 文本标签：网页显示内容只能插入文字或其他级别的文本标签
  • 容器标签：显示内容可插入任意类型的内容I（包括文本和文本标签），或其他级别的容器标签
    注意：同一种标签不可相互嵌套

常用标签

  • h系列标签：在网页中显h1~h6级标题，都容器标签，h系列标签不可相互嵌套，即都为兄弟关系
    一般页面中只能有一个h1标题，因为在html中，标签是分权重的，h1权重是最高的，一般页面logo会使用

  • p：段落，属文本标签

  • img：在网页中显示图片，属文本级单标签
    常用属性：
    src:设置要显示的图片路径（必选属性，否则不会显示图片）
    width:设置图片宽度，高度会等比例缩放
    height:设置图片高度,属性值由数字+px（pixel：像素）单位组成
    border:设置图片边框宽度，属性值为数字+px，默认边框颜色为黑色
    title：鼠标移至图像上时显示的文字
    alt：当设置的图片没有图像时，用文字替代

  • a:[anchor]，汉语为锚，熟称超链接，可以设置不同网页进行跳转，为文本级双标签
    可以实现不同网页的跳转，也可实现同一网页中，不同位置跳转
    常用属性：
    href：当前网页即将跳转的另一个网页地址（可以是网页链接，也可以是当前服务器上的html文件路径）
    title：设置鼠标移至其上时显示的文字
    实现同一网页不同位置跳转：1，设置锚点（任意标签），需要添加id属性；2.设置锚点链接，给a标签添加href属性，属性值为’#+锚点的id属性值‘

5.列表标签
网页中结构相同，内容相关的结构，可用列表搭建

  • 无序列表：无序列表需要两个标签配合才可使用。分别时ul,li。为容器级别
    ul:unorder list,表示一个列表容器，大结构
    li：list item，表示容器中的每一项。每一项前面默认会有一个小圆点
    ul内部只能嵌套li标签，li标签不能脱离ul单独使用。li标签可再去嵌套ul/li标签。
  • 有序列表：可单间一个有顺序的列表结构。需结合两个标签一起使用。ol和li
    ol:order list,表示一个列表容器，大结构
    li：list item，表示容器中的每一项。每一项前面默认会有一个数字且为顺序结构
    ol内部只能嵌套li标签，li标签不能脱离ol单独使用。li标签可再去嵌套ol/li标签。
  • 定义列表：用来定义一个自定义标题和内容列表，需结合三个标签一起使用：dl，dt，dd，均为容器标签。
    dl:difinition list，最外层大结构，列表容器
    dt：difinition term。表示列表主题或术语
    dd：表示对于主题，术语的一个解释
    使用时dl需要嵌套dt和dd，dt和dd属于兄弟关系。

6.布局标签
常用的布局标签：div和span。熟称’盒子‘
div:division,区域，分割，经典的容器级双标签。用来划分页面区域，辅助页面布局
span：小区域，小跨度，经典的文本级双标签。在不影响整体布局的时候，可用于局部调整

7.表格与表单

制作表格时至少需要三个标签。

  • table:表格大框架（常用属性border，style……），容器标签
  • tr:table rows，定义表格的行，
  • td：table dock，定义表格内部的列
    嵌套关系：table>tr>td
    th:table head,表头单元格，可以替换td的位置 （不是必须）

表单元素：可以让用户输入文字的一个小控件
form:不是一个结构性标签，是一个功能性容器级标签，可将表单元素收集到的数据提交给服务器
全部表单元素需要嵌套在form标签内，form不是表单元素
作用：可以设置表单元素收集数据提交给谁，设置提交数据方式。
from标签有两个重要属性：

  • method：get或post方式
  • action：设置收集到的数据提交给谁的路径

8.文本框与密码框（表单元素）

  • input：文本级单标签
    重要属性：
    type：type属性值不同可设置不同类型表单元素
    value：可设置文本框的默认输入值
  • 密码框：可通过input标签获取到，只需要将type属性值设为password即可
<form action="">
		密码：<input type='password'/>
</form>

9.按钮（表单元素）

  • 单选按钮：单选按钮也是通过input标签获取，type属性值设为radio即可。
    单选按钮一般是成组出现的，且互斥，可通过给input标签设置name属性且属性值相同来实现互斥
  • 复选按钮：复选框同样由input表签获取，type属性值设置为checkbox
	<form action="">
		<p>爱好
			<input type='checkbox'/> 吃饭
			<input type='checkbox'/> 睡觉
			<input type='checkbox'/> 游泳
		</p>
	</form>

如单选或复选按钮想要默认选中状态，可给input标签添加checked属性，属性值也为checked
通过input标签，还可获取三种不同的按钮，通过设置type属性来实现。
type属性值：

  • button：普通按钮
  • reset：重置按钮，单击后可将form表单内的全部表单元素恢复起始状态
  • sbmit：提交按钮，将form表单内收集到的表单数据提交给服务器，且恢复至起始状态

10.文本域（表单元素）
文本域表单元素可让用户在多行中输入内容，当输入的文字过多则会出现滚动条。文本框只能输入一行内容
textarea：文本级双标签
常用属性：rows，cols，主要作用是修改文本域的大小
默认显示文字：在标签内插入文字即可；eg：

11.下拉菜单
制作下拉菜单需要两个标签结合使用，需要嵌套结合使用。
select > option (均为文本级双标签)
select：搭建下拉菜单整体结构
option：下拉菜单的每一个选项

	<select name="" id="">
		<option value="">北</option>
		<option value="">上</option>
		<option value="">广</option>
		<option value="">深</option>
	</select>

下拉菜单默认显示第一项，如想让某一项作为默认选项，需给option选项加属性selected，属性值为selected

12.拓展知识点
注释：注释在开发工具中可见，不会在网页中显示。快捷键【ctrl+?】
字符实体：在制作网页时，一些特殊字符（如<>，表示一个标签，或空格）不能显示时，则需使用字符实体

posted @ 2021-02-14 17:15  tingshu  阅读(48)  评论(0)    收藏  举报