前端学习第一阶段——HTML

WYH
161 阅读4分钟

基于一定基础上的巩固及深入学习---DAY-1 HTML
一． HTML是一种超文本标记语言（由各种标签组成）

二． 常用浏览器（读取网页内容）：
IE，火狐，谷歌，Edgo，Safai，Opera

三． Web标准（W3C）

包括结构，表现和行为

标准

结构    结构用于对网页元素进行整理和分类（HTML）
表现    表现用于设置网页元素的版式，颜色，大小等外观样式（CSS）  
行为    行为是指网页模型的定义及交互的编写（JS）

四． 语法规范

  1. 标签
    1.1 双标签
<html>
       <head></head>
       <body></body>
</html>

1.2 单标签

  1. 标签关系

    2.1    包含关系（父子） 
2.2    并列关系（兄弟）

五． 基本结构

<!DOCTYPE html>//文档声明类型
<html lang="en">//定义当前文档显示语言(en英文网站，zh-CN中文网站)
<head>
<meta charset="UTF-8">//规定html所使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

六． HTML常用标签

  1. 标题标签
<h1>-<h6>//共六级，每个标题独占一行
<h1>一级标题</h1>
  1. 段落和换行标签
<p></p>
  1. 文本格式化标签\
Strong/b，em/i，del/s（删除线），ins/u（下划线）
  1. 盒子标签
   <div>独占一行
   <span>一行可以放多个

  1. 图像标签
    5.1 图片标签
    单标签
    <img src = “图像url”>

    属性：

     src图片路径
 title鼠标放到图像上显示的文本
 alt替换文本（当图片不能正常显示时）
 width宽（px）
 height高（px）
 border边框粗细（px）

    可以有多个属性，不分先后，属性与属性之间用空格隔开
    5.2 路径标签
    5.2.1 相对路径
    以引用文件所在位置为参考，建立的目录路径
    例如：<img src = “baidu.gif”>
    下一级：/ 上一级：../
    5.2.2 绝对路径
    目录下的绝对位置，通常从盘符开始
    例：D:\git\2021\rendc\day16\1-一元运算符.js

  2. 超链接标签
    6.1 a标签

<a href="tiaozhuan" target = "目标窗口的弹出方式" >文本或图像</a>

属性：

herf：链接url
target：url打开方式。_self默认值，_blank在新窗口打开

6.2 链接

外部链接：http://www.baidu.com
内部链接：day1.html（同级）
空链接：#
下载链接：.exe/.zip

网页元素链接：将超文本内容作为链接
锚点链接：快速定位到页面位置

 <a href="#two">文本或图像</a>
 <h3 id="two">文本或图像</h3>

  1. 注释标签

    html： <!—这是一个注释-->
CSS：  /*这是一行注释*/
JS:    //这是一行注释

  2. 特殊字符标签

    常用：
&nbsp 空格
&lt  >大于号
&gt  <小于号

  3. 表格标签
    9.1 表格作用

    显示，展示数据

    9.2 基本语法
    9.2.1 标签

     <table>定义表格的标签</table>
 <tr>定义表格中的行，必须在table里</tr>
 <td>定义表格中单元格，必须在tr中</td>
 <th>表头table head，文字会加粗居中</th>

    表格可分为三个区域
    例：

``

      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">1</td>
        <td>tom</td>
        <td>男</td>
        <td>2021-03-01</td>
      </tr>
      <tr>
        <td>jacky</td>
        <td>男</td>
        <td>2021-03-01</td>
      </tr>
      <tr>
        <td colspan="2">vicky</td>
        <td>女</td>
        <td>2021-03-01</td>
      </tr>
    </tbody>
    <tfoot></tfoot>

9.2.2 表格属性（不常用，后用CSS）

 align   value=left,center,right 对齐方式
 border   是否有边框，默认无
 cellpadding  规定单元边沿与内容间的空白，默认1
 cellspacing  规定单元格间的空白，默认2
 width  表格宽度

9.2.3 合并单元格

  跨行合并：rowspan=“合并个数”，写到上侧
  跨列合并：colspan=“合并个数”，写到左侧
  1. 列表标签
    用于布局，整齐有序
    10.1 无序列表
    并列，ul只能嵌套li，li中可以嵌套所有元素
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>

10.2 有序列表
按照一定顺序排列

  <ol>
    <li>1</li>
    <li>2</li>
  </ol>

10.3 自定义列表
用于对术语或名词进行解释和描述，没有任何符号

  <dl>
    <dt>关注我们</dt>
      <dd>新浪微博</dd>
      <dd>官方微信</dd>
  </dl>

  1. 表单标签
    用于收集用户标签
    由表单域，表单控件和表单信息构成
    11.1 表单域
    包含表单元素的区域

    将表单元素信息提供给服务器 属性： 
     action  指定接收并处理表单数据的服务器程序的url地址
 method  设置表单数据的提交方式，取值get，post
 name    指定表单名称，区分一个页面中多个表单域

<input type=“text”>表单元素，单标签

    单选框：radio 
    复选框：checkbox 
    提交按钮：submit 
    重置按钮：reset
    按钮：button 
    文件上传file

    name： 定义input元素名称，单选按钮、复选按钮应拥有相同名称
    value：规定input元素的值
    checked： 规定input元素首次加载中默认选中
    maxlength： 规定最大字段中字符最大长度

<lable>标签用于绑定一个表单元素，点击label标签内的文本时，浏览器就自动将焦点选择相对应的元素上，增加用户体验。

avatar
文章
阅读
粉丝