蓝旭前端第二周预习———HTML标签+如何查看控制台

蓝旭前端第二周预习———HTML标签+如何查看控制台

  • HTML标签
    • 文档
      • 文档生成
      • 文档结构
    • 标签
      • 标签语法
      • 基本标签
  • 如何查看控制台(chrome)

HTML标签

文档

文档生成

VScode中“文件”=》“新建文件”=》右下角选择语言模式为HTML=》输入‘!’(半角字符)‘enter’=》生成基础文档

文档类型:符合HTML5标准
<html lang="en">lang属性:搜索引擎(en英文 zh中文)
<head>
    <meta charset="UTF-8"> <meta>:元数据 charset属性:字符集编码方式(保存时的编码应与声明时相同) UTF-8:国际编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝旭前端第二周预习———HTML标签+如何查看控制台title>
head>
<body>
body>
html>

文档结构

<html>
	<head>头部:浏览器、搜索引擎所需信息
		<title> title>网页标题
	head>
	<body> 主体:网页中包含的具体内容
	body>
html>

标签

标签语法

  • 由尖括号包围
  • 通常成对出现
  • 标签嵌套
    • 前后顺序
    • 父子元素/兄弟元素
<html><body>body>html> 正确
<html><body>html>body> 错误
<html>
	<head>
	head>
	<body>
	body> 
html>
  • 注意缩进
  • 标签属性
    一个标签可能有多个属性属性先后顺序无关

基本标签

  • 标题
    字体由小到大 一个页面建议只有一个h1 eg:

    标题内容

  • 段落


    每个段落自动换行;段落内部文字忽略连续空格,也不会显示空行,且不会换行。eg:

    段落内容

  • 段内换行

    单独出现的标签,直接结束
  • 空格字符 
    特殊字符,全小写
  • 预留格式

    定义预格式化的文本,文本中的空格和换行符会被保留。
  • 行内组合
    组合行内元素,以便通过CSS样式来格式化
  • 水平线

    生成一条水平线
  • 注释< !-- 注释内容 -- >
  • 超链接< a href =“网址”> 文字或图片
  • 插入图片
    • 图片格式: jpg/png/gif
    • 插入图片:文件名
    • 绝对路径与相对路径
      • 绝对路径:以根目录为基准
      • 相对路径:以该文件所在位置为基准
  • 区域
  • 列表
    • 无序列表
      • 有序列表
        1. 列表项
    • 表格
    • 单元格
    • 表头单元格
    • 表单

      是一个区域,采集用户信息
      • 表单元素:
          • 文本框:type=“text”
          • 密码框:type=“password”
          • 提交按钮:type=“submit”
          • 重置按钮:type="reset’
          • 单选框(只能选择一项):type=“radio”
          • 复选框(任意选择多项):type=“checkbox”
        • 下拉列表框
    • Web语义化
      • 让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容
        结构清晰,利于团队的开发、维护,有利于搜索引擎理解
      • SEO (Search Engine Optimization)搜索引擎优化,容易兼容不同设备
      		<em> 强调(斜体) em> <br />
      		<i>斜体,无语义i>
      		<strong> 重点强调(粗体) strong> <br />
      		<b>粗体,无语义b>
      
      • 自定义列表
        、列表项
        、描述
      	<dl>
      		<dt>HTMLdt>
      		<dd>超文本标记语言dd>
      		<dt>CSSdt>
      		<dd>层叠样式表dd>
      	dl> 
      
    • 如何查看控制台(chrome)

      • F12
        打开chrome,在键盘上按f12键,成功打开控制台
      • 右键检查元素
        在界面任意位置点右键检查或者审查元素,成功打开控制台,并定位到右键点击的元素
      • 菜单
        点击右上角3个点的符号,鼠标悬浮到右上角的更多工具上面,点击更多工具-开发者工具
      • ctrl+shift+i
        键盘上的ctrl+shift+i,3个键一起按和按f12效果一样。这种方法在electron中也管用

      你可能感兴趣的:(html)