初识HTML

心劫
287 阅读5分钟

HTML总结

1，基本概念

网页和网站

  • 网站中有N个网页组成
  • 网页中包含：文字、视频、图片、音频、链接、程序······
  • 网页中的内容·有HTML技术实现
  • 网页的后缀通常都是.html

浏览器和渲染引擎

  • 常见的浏览器：谷歌、火狐、IE、Safari、欧朋
  • 不同的浏览器有不同的内核(渲染引擎)，现在不需要记

网页三层交互

  • 结构层：使用HTML技术实现，说白了，就是给网页提供内容
  • 样式层：给网页提供样式(布局，美化)
  • 交互层：使用JS实现，JS是前端程序员最最需要掌握的技术

开发工具

  • 推荐使用VS Code工具——好处：小巧，插件多
  • 快捷键：

shift > alt > 向下箭头 => 复制上一行 tab => 向后移动代码 shift > tab => 向前移动代码 ! > tab => html基本骨架 !是英文的! div.wraper > tab => 生成一个带名字的div 鼠标中键 > 向下拽 => 同时选中多行
键盘上的del键 => 删除文件 F2 => 重命名 shift > alt > f => 格式化代码 ctrl > f => 查找内容并替换内容

标签，属性，元素

  • 标签：标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签
  • 标签与标签之间是有关系的，分兄弟关系和父子关系
  • 属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性
  • 属性也分两类：共有属性和特有属性
  • 共有属性：class，id，title，style
  • 元素：标签>属性>标签之间的内容

2.HTML的基本骨架

文档声明

  • HTML5的文档声明
  • 告诉浏览器，以什么样的标准来解析我们写的代码

html元素

  • 是一个网页的根元素，只有这一个
  • lang属性：指定网页的语言
<html lang="en">表示英文
<html lang="zh>CN">表示中文

head元素

  • 网页的头部：基本上对网页的设置，都会在head实现
  • title属性：指定网页的标题的
  • meta属性：charset="utf>8"如果不指定，会出现乱码

body元素

  • 网页的主要内容都写在body中的

3.常用标签

h标题标签

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
  • p标签为段落标签
  • 浏览器会自动适用换行
  • br换行标签 <br/>
  • 强制换行
  • 单标签

文本格式化

  • 加粗：<strong></strong>或者<b></b>
  • 倾斜：<em></em>或者<i></i>
  • 删除线：<del></del>或者<s></s>
  • 下划线：<ins></ins>或者<u></u>

无语义标签

  • div

特点：

width由屏幕宽度决定（独占一行）height自适应（由内容撑开）默认占一整行（一行只能显示一个）页面布局中用的最多~

  • span

特点：

width、height由内容来决定（都由内容撑开）一行里面可以显示多个

图片标签 <img/>

<img src="" alt="" title="" width="" height="" border="">
  • 属性

src:图片的路径 alt：当图片加载错误时显示的文字 title：当鼠标悬停在图片上显示的文字 width：图片的宽度 height：图片的高度 border：图片的边框

属性的特点

  • 属性之间不分先后顺序
  • 属性名与属性值之间以键值对的形式存在
  • 属性名与属性之间以等号分隔 属性值要以引号包裹

路径和链接 <a></a>

<a href="http://www.baidu.com"></a>
  • 外部链接 跳转写完整的协议、域名、网址
<a href="文件名"></a>
  • 内部链接 直接写文件名就行

属性

href:指定跳转界面 title：鼠标悬停的文字显示 target：_self(默认会覆盖原来的窗口) _blank(会以新的窗口打开)窗口的方式 #：会阻止页面跳转但是会刷新页面

锚点

  • 链接使用
  • 目标标签id值与连接#号后面一致

跳转同一界面

<a href="#first">跳转指定界面</a>
<a id="first">我是指定界面</a>

跳转不同界面

<!--a.html-->
<a href="b.html#first">跳转b界面</a>
<!--b.html-->
<a id="first">我是b界面</a>

注意

id前面要加上‘#’，不同页面之间的跳转要加上页面名

注释与特殊字符

<!--我是注释-->

  • 编辑器使用Ctrl+/快捷键 Snipaste_2022-06-09_17-19-07.png

4.列表类标签

无序列表

<ul><li></li></ul>
注意事项：

1．无序列表的各个列表项之间没有顺序级别之分，是并列的； 2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的； 3.<li> 与</li>之间相当于一个容器，可以容纳所有元素； 4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置

有序列表

<ol><li></li></ol>
注意事项

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的; 2.

  • 与
    • 之间相当于一个容器，可以容纳所有元素; 3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

    自定义列表

    <dl><dt></dt><dd></dd></dl>
    注意事项

    1.<dl></dl>里面只能包含<dt>和<dd>； 2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

    5.表格类标签

    标签

    • 表格：<table></table>
    • 行：<tr></tr>
    • 单元格：<td></td>
    • 表头：<th></th> - 加粗、加黑、自动居中
    • 表格标题：<caption></caption> - 写在内部显示外部、居中
    • 结构头：<thead></thead>
    • 结构体：<tbody></tbody>
    • 结构底：<tfoot></tfoot>

    属性

    1. border：表格的边框 默认的0
    2. width：宽度
    3. height：高度
    4. cellspacing:单元格与单元格之间的距离
    5. cellapading：单元格与内容之间的距离
    6. align：left、center、right
      • 使用align注意： 当给表格设置居中整个表格会居中(文字不会居中) 当指定tr 或者td 文字居中
    7. colspan：列合并
    8. rowspan：行合并

    表单类标签

    1. input属性

    text：文本框 password：密码框 radio：单选按钮 checkbox：复选框 button：普通按钮 reset：重置按钮(需配合form表单才有作用) submit：提交按钮 image：属性src file：文件按钮(用来上传照片)

    1. name属性

    发送后台 name的标识 对于单选按钮 只能选择一个

    1. value：

    文本框默认显示的文字

    1. checked:

    默认选中(可以写一个属性 也可以写 属性名=属性值)

    1. label
    1.<lable>请输入<input type="text"><input type="text"></label>

    2.<lable for="a">请输入</lable><input type="text" id="a">
    1. 文本域

    textarea：

    用户留言 可以输入多行文本

    1. 下拉列表
    <select>
    <option value="01">请选择</option>
    <option value="02">上海</option>
    <option value="03">广州</option>
    <option value="04">北京</option>
</select>
    • selectes：

    selected属性是布尔属性。 如果存在，它指定在页面加载时应预先选择一个选项。 预选选项将首先显示在下拉列表中

    提示：

    使用JavaScript加载页面后，也可以设置所选属性。 8. form表单

    • 主要的作用：是收集用户的信息来发送给后台
    • action：提交后台的地址
    • metho="get/post"提交(传输)后台的方式
    • name="a"告诉服务器是由哪个表单提交过来的

    如遇情况请联系作者

    avatar
    文章
    阅读
    粉丝