20初识前端HTML(1)

1 、HTML

1.1 网页的组成

文字 图片 链接 等元素构成。除了这些元素之外 网页中还可以包含音频 视频 等

1.2 WEB前端开发的流程

现在主流的开发流程:

前后端分离的开发模式。

  • 美工:ps(效果图)

    • 前端和后端需要协商后端接口的开发规范。

  • 前端工程师:(HTML CSS JS等前端技术)实现静态网页 同时还需要使用mock技术 实现页面的模拟测试。

  • 后端工程师:开发接口。

    • 前后端联调。

1.3 WEB的标准(重点)

不同的浏览器(火狐,谷歌, IE)的内核是不同的。 并且他们的工作的原理 对页面的解析是不同的,在显示上就会有差异。W3C组织制定了浏览器的WEB标准

1.3.1 web标准的好处

1 能够被广泛的设备访问

2 更容易的被搜索引擎所搜索

3 降低网站的流量费用

4 使网站更易于维护

5 提高页面的浏览速度

1.3.2 WEB标准的构成

主要包括结构 表现 和行为三个方面

结构标准:用于对网页元素进行整理和分类 主要包括html 和XHTML 等。

样式标准:表用用于设置网页元素的版式 颜色 大小等外观样式,主要指的就是CSS

行为标准:指的是网页模型的定义以及交互的方式,主要包括 DOM ,ECMAScript和BOM三部分。

2 HTML的认识

HTML:Hyper Text Markup Lanague(超文本标记语言)

HTML是通过标签来标记要显示的网页中的各个部分,网页本身是一种文本文件,通过文本文件添加标记符,可以告诉浏览器如何显示其中的内容(文字如何处理,页面如何排版,图片如何显示等)。

2.1 开发第一个HTML的页面

1 创建一个HTML文件 扩展名为.html 或者。htm

2 在文件中编写HTML页面的基本框架 html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
</head>
<body>
    
</body>
</html>

JAVA 程序需要先编译 后由java虚拟机运行。但是HTML文件不需要编译,直接有浏览器进行解析执行。

2.2 文档类型

<!--html4的文档类型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--html5的文档类型 -->
<!DOCTYPE html>

必须位于文档的第一行 告诉浏览器当前文档使用的是哪种html标准规范。

3 HTML的标签

3.1 头部标签

<head>
    <!-- meta标签是页面的元数据 -->
    <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>

元数据标签:meta标签

meta标签通常用于指定网页的描述 关键字 文件的最后的修改时间 作者 及其他的元数据

元数据可以被浏览器使用,搜索引擎发现其他的web服务调用。

meta标签常用name属性:

 <!-- meta标签是页面的元数据 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置网页可以自适应布局 width=device-width  适应设备的宽度  initial-scale不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name='keywords' content="网上购物,网上商城">
    <meta name="description" content="这是一个B2C的全品类的电商网站">
    <meta name="author" content="张三">
    <!-- 设置网页的自动跳转 5秒之后跳转到百度 -->
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    <!-- 页面的标题 -->
    <title>这是第一个HTML页面</title>

3.2 body

3.2.1 标签的格式

<标签名 属性名=属性值, 属性名 = 属性值>标签的封装内容</标签名>

标签名大小写不敏感 推荐标签名统一小写

标签的属性:

基本属性:bgcolor=”red“ 可以修改元素的基本样式

事件属性:onclick=“alert('你好')” 可以让浏览器产生一定的动作来相应当前的操作

标签分类:

单标签和双标签

单标签:<标签名/>

<hr/>

双标签:<head></head> <body></body> <p></p>

标签的语法:

1 标签不能交叉嵌套

<!-- 正确 -->
<div><span>你好,html</span></div>
<!-- 错误 -->
<div><span>你好,html</div></span>

2 双标签一定要记得关闭

3 属性必须有值 属性值要使用双引号

4 注释 不能嵌套

3.2.2 常用标签

3.2.2.1 font字体标签

<font color="red" face="宋体" size="22"> Hello  HTML </font> 

3.2.2.2 特殊的符号

  <h2>这是一个换行标签&lt;br/&gt;</h2>

常见的符号

&nbsp; -->空格,无论在源代码中写了多少个空格 浏览器都将解析为一个空格
&lt;
&gt;
&amp;-->&
&quot;-->“
&apos;-->'

3.2.2.4 标题标签

标题标签 h1 --- h6

h1 是最大 h6 最小

属性:

对齐方式: align:left right center

3.2.2.5 超链接

在网页中所有点击之后可以跳转的内容都是超链接

 <!-- 
    a 标签是超链接标签
    href 设置链接的地址
    target:
        _self 表示在当前标签中打开链接地址
        _blank 表示在一个新的标签中打开链接地址的页面
  -->
 <a href="http://www.baidu.com" target="_blank">百度</a>

3.2.2.6 列表标签

无序列表 有序列表

 <!-- 
    ul 表示无序列表
    ol表示有序列表
      li 列表项
        type属性  可以修改列表签的样式 
            有序列表:A  a  1  i
            无序列表:none  disc   square    circle
  -->
<ol type="i">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ol><ul type="circle">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

3.2.2.7 图像标签

<img src="img/1.jpg"  width="300px" height="200px" border="10"  alt="这是一张图片">

3.2.2.8 表格标签

  <!-- 
        标签:table 表示表格
              tr  表示行
              td 表示单元格
              thead 表示表头
              tbody 表示表体
              th 表头的单元格
        表格属性:
             border  表格的边框
             align 表格相对于页面的对齐方式  left  right  center
             width  表格的宽度
             height 表格的高度
             cellspacing 单元格之间的间距
        单元格的属性:colspan 设置跨列   合并列
                    rowspan  设置跨行  行合并
     --><table align="center" border="1" width="300px" height="300px" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td></td>
            <td>21</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>18</td>
        </tr>
    </table><table align="center" border="1" width="300px" height="300px" cellspacing="0">
        <thead>
            <tr >
               <th colspan="4">个人基本信息</th> 
            </tr>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>学校</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr >
                <td>张三</td>
                <td></td>
                <td>21</td>
                <td rowspan="2">中北大学</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>18</td>
            </tr>
        </tbody>
        
    </table>

3.2.2.9 iframe框架标签(了解) 内联或内嵌框架

iframe 标签他可以在一个html页面上 打开一个小窗口,去加载一个单独的页面

  <iframe src="index.html"  width="800px" height="300px" name="abc"></iframe>

3.2.2.10 frameset (了解)

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

<!-- 垂直划分  左右分别占比 25%  75 -->
<frameset cols="25%,75%">
    <frame src="index.html">
    <frame src="table.html">
 </frameset>
 <!-- 水平划分 分为上中下  分别占比 25% 50%  25%-->
 <frameset rows="25%,50%,25%"><frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  
  </frameset>

4 表单标签

表单标签 form标签 主要是用来收集用户的输入数据,将数据提交到后台,进行处理保存。

<form action="">
    <!-- 单行文本输入框 -->
    用户名称:<input type="text" value=""  placeholder="请输入用户名称"/><br/><br/>
    <!-- 密码框 -->
    用户密码:<input type="password" value="" placeholder="请输入密码"/><br/><br/>
    确认密码:<input type="password" value="" placeholder="请输入确认密码"/><br/><br/>
    <!-- 文件选择对话框 -->
    头像:<input type="file" value="" placeholder="请选择你要上传的文件"/><br/><br/>
    <!-- 单选按钮的之间是互斥关系  因此单选按钮的name属性值必须一致 这样才能互斥 -->
    性别:<input type="radio" name="sex" value="man" checked="true"><input type="radio" name="sex" value="woman"><br/><br/>
         <!-- 复选框  type=checkbox  可以同时选中多个值  默认选择则使用checked表示选中  可以使用checked或true-->
    兴趣爱好:<input type="checkbox" value="JAVA"  checked="checked">JAVA
                <input type="checkbox" value="python">python
                <input type="checkbox" value="html">HTML
                <input type="checkbox" value="CSS">CSS<br/><br/>
    <!--下拉选择框  multiple表示下拉框是否可以多选  默认选择使用selected  option选项 -->
    籍贯:<select >
            <option>--请选择籍贯所在地--</option>
            <option value="sx" selected="selected">山西</option>
            <option value="tj">天津</option>
            <option value="bj">北京</option>
            <option value="hn">湖南</option>
        </select><br/><br/>
    自我评价:
        <textarea rows="10"  cols="80" placeholder="请填写自我评价"></textarea><br/><br/>
    <!-- 提交按钮 -->
    <input type="submit" value="提交"/> 
    <!-- 重置按钮 -->
    <input type="reset" value="重置"/>
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮"/></form>

使用表格完成表单的布局设置

<form>
    <h1 align="center">用户注册</h1>
    <hr width="500px">
    <table align="center" width="500px">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" value=""  placeholder="请输入用户名称"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" value="" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" value="" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td>头像:</td>
            <td><input type="file" value="" placeholder="请选择你要上传的文件"/></td>
        </tr>
    </table>
</form>

5 其他标签

div标签

span标签

p 段落标签

<!-- div标签是独占一行  但是 标签本身不占有任何空间 依靠内容来占据空间-->
<div style="width: 100px; height: 100px; ">这是一个div标签</div>
<div>这是一个div标签</div>
<!-- span标签是在同一行  本身也不占据空间  依靠内容来占有空间 -->
<span>span标签 </span><span></span> <span>span标签 </span>
<!-- p段落标签  默认会在段落的上方或下方空出一行 -->
<p>
    8月6日,郑州市新冠肺炎疫情发布会回应,网传“800人婚宴”夸大其辞,当天参加婚宴者实有402名客人,60名工作人员,请大家不造谣、不信谣、不传谣。那么,这名护士在哪一天确诊?与她的接触者可否定为密接和次密接者......
    </p>

 

 

posted @ 2021-08-09 15:46  岛boki  阅读(62)  评论(0编辑  收藏  举报