其他分享
首页 > 其他分享> > Web前段介绍

Web前段介绍

作者:互联网

Web前段介绍

一、什么是网页 

网页是基于浏览器的应用程序,是数据展示的载体。

二、网页的组成

1. 浏览器

代替用户向服务器发请求

接收并解析数据展示给用户

2. 服务器

存储数据

处理并响应请求

3. 协议

规范数据在传输过程中的打包方式

三、开发前的准备

1. 运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
2. 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
3. 开发工具:不限,选用个人习惯的即可。(Sublime、VSCode、EditPlus、PyCharm等)

HTML语法介绍

一、HTML介绍

超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容。

二、标签

标签也称为标记或元素,用于在网页中标记内容

1. 语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示

2. 分类:

  双标签:成对出现,包含开始标签和结束标签。例:<html></html>

  单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:<br><br/>

3.标签属性:  

  标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。

    由属性名和属性值组成,属性值使用双引号表示。例:<meta charset="utf-8">

    同一个标签中可以添加若干组标签属性,使用空格间隔。例:<img src="lily.jpg" width="200px" height="200px">

 三、使用

1. 创建网页文件,使用.html或.htm作为文件后缀

2. 添加网页的基本结构  

<html>
    <head>
    <title>网页标题</title>
        <meta charset="utf-8">
     </head>
 <body>
网页主体内容
</body>
</html>       

3. 标签嵌套:在双标签中书写其他标签,称为标签嵌套;

4. HTML语法规范

  标签名不区分大小写,建议使用小写

  注释语法: 快捷键Ctrl+/  <!-- 此处为注释 -->

常用标签介绍

一、基本结构解析

快捷键:!+table

<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 -->
   <head>
       <!-- 设置网页标题,显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分,显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

 二、body中常用标签

1.文本标签

标题标签:自带加粗效果,从h1到h6字体大小逐级递减

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签:<p>段落文本</p>

普通文本标签:

 <span>行分区标签,用于对特殊文本特殊处理</span>
 <b>加粗标签</b>
 <strong>强调标签,效果同b标签</strong>
 <label>普通文本标签,常与表单控件结合实现文本与控件的绑定</label>
 <i>斜体标签</i>
 <u>删除线标签</u>

格式标签:

  浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。

  <br>

  水平线标签,在页面中插入一条水平分割线

  <hr>

字符实体:

某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写

例:

容器标签:常用于页面结构划分,结合CSS实现网页布局

<div id="top">页面顶部区域</div>

<div id="main">页面主体区域</div>

<div id="bottom">页面底部区域</div>

2.图片与超链接标签

图片标签

<img src="">:用于在网页中插入一张图片。

  1. 属性 src 用于给出图片的URL,必填。
  2. 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
  3. 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
  4. 属性 alt 用于设置图片加载失败后的提示文本

语法:

  <img src="" width="" height="" title="" alt="">

  <img src="northStar.jpg" width="500px" title="northStar" alt="此处为图片">

超链接标签:用户可以点击超链接实现跳转至其他页面

  1. 属性 href 用于设置目标文件的URL,必填。

  2. 属性 target用于设置目标文件的打开方式,默认("\_self")在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

<!--刷新-->
<a href="">链接地址为空</a>
<!--'#'表示锚点连接,链接至指定文件的指定位置-->
<a href="#">链接地址为#</a>
<!--跳转2号位置-->
<a href="05_anchor.html#two" target="_blank">2号位置</a>
<!--阻止默认跳转,既不刷新也不跳转-->
<a href="javascript:void(0)">阻止默认的跳转行为</a>
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--目录超链接-->
<a href="#one">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="#last">5</a>

<!--添加锚点-->
<a name="one"></a>
<h1 style="height:300px;background:green;">1.超链接</h1>
<h1 style="height:300px;background:green;">2.超链接</h1>
<h1 style="height:300px;background:green;">3.超链接</h1>
<h1 style="height:300px;background:green;">4.超链接</h1>
<a name="last"></a>
<h1 style="height:300px;background:green;">5.超链接</h1>
<!--鼠标点1或者点5会跳转到1或者5的位置-->

三、常用结构标签

1.列表标签 

  有序列表(ordered list)        取值"1"/"a"/"A"/"i"/"I",

  默认使用阿拉伯数字标识每条数据

<ol>
  <li>list item 列表项</li> 
  <li>list item 列表项</li>
  <li>list item 列表项</li>
</ol>

  无序列表(unordered list)    ul中可取:circle/square(实心方块)/none(取消项目符号)

  默认使用实心圆点标识列表项

<ul>
    <li>list item 列表项</li> 
    <li>list item 列表项</li>
    <li>list item 列表项</li>
</ul>

  列表嵌套:在已有列表中嵌套添加另一个列表,常见于下拉菜单

<ol>
    <li>
        西游记
        <ul>
            <li>孙悟空</li>
            <li>孙悟空</li>
            <li>孙悟空</li>
        </ul>
    </li>
</ol>                     
<ol type="i">
    <li>老王</li>
        <ul>
            <li>抽烟</li>
            <li>喝酒</li>
            <li>烫头</li>
        </ul>
    <!--父子嵌套实现下拉菜单-->
    <li>
        老李
        <ul>
            <li>抽烟</li>
            <li>喝酒</li>
            <li>烫头</li>
        </ul>
    </li>
    <li>老张</li>
</ol>
<ul>
    <li>抽烟</li>
    <li>喝酒</li>
    <li>烫头</li>
</ul>  
练习

2.表格标签         

表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下

<!-- 创建表格标签 -->
<table>
    <!-- 创建行标签 -->
    <tr>
        <!-- 行中创建单元格以显示数据 -->
        <td>姓名</td>
        <td>年龄</td>
        <td>班级</td>
    </tr>
    <tr>
        <!--th表示单元格,自带文本加粗和居中效果-->
        <th>迪丽热巴</td>
        <th>20</td>
        <th>002</td>
    </tr>
</table>                

  单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后需要删除被合并的单元格,保证表格结构完整    

单元格属性 作用 取值
colspan 跨列合并单元格 无单位数值
rowspan 跨行合并单元格 无单位数值

 

 

  

 

行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中

<table border="1px" width="300px" height="300px">
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>
<table border="1px" width="300px" height="300px">
        <!--表格内部结构划分(行分组):
        将若干行划分为表头,表尾和表格主体,
        默认所有的行都会被自动加入表格主体中(tbody)
        -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="3">总人数:</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>老王</td>
                <td>35</td>
                <td>001</td>
            </tr>
            <tr>
                <td>老李</td>
                <td>35</td>
                <td>001</td>
            </tr>
        </tbody>
</table>
练习

3.表单标签     

表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数据给服务器,表单控件负责收集数据。

表单使用<form></form>  

例如:
<form action="" method="" enctype="">
    <!--此处为表单控件-->
</form>
属性名 取值
action 设置数据的提交地址
method 设置数据的提交方式,默认为get方式,可以设置post
enctype 设置数据的编码,射击二进制数据提交(例如图片,文件,音频等),必须设置数据的提交方式为post,编码类型为"multipart/form-data"

 

 

 

表单控件使用(重点)

表单控件用于采集用户信息,可设置以下标签属性

属性名 取值
type 设置控件类型
name 设置控件名称,最终与值一并发给服务器
value 设置控件的值
placeholder 设置输入框中的提示文本
maxlength 设置输入框中可输入的最大字符数
checked 设置单选按钮或复选按钮的默认选中
selected 设置下拉菜单的默认选中

 

 

 

 

 

<body>
    <!--网页表单-->
        <!--form负责提交数据给服务器.标签属性:
    action指定数据的提交地址
    method指定数据的提交方式,默认为get
    enctype指定数据的编码方式,默认转换字符串,
    拼接在URL后面(urlencoded),
    如果涉及二进制数据(图片,音视频等),必须设置提交方式为post,
    同时指定编码类型为multipart/form-data-->
    <form action="/login" method="get" enctype="application/x-www-form-urlencoded">
        <!--表单控件-->
        <p>
            用户姓名:<input type="text" name="username" placeholder="用户名由数字和字母组成" maxlength="10">
        </p>
        <p>
            用户密码:<input type="password" name="userpwd" placeholder="请输入密码">
        </p>
        <p>
            用户性别:
            <!--一组按钮的控件名称必须保持一致-->
            <!--checked默认选中-->
            <input type="radio" name="gender" value="boy" checked="checked">男
            <input type="radio" name="gender" value="girl">女
        </p>
        <p>
            兴趣爱好:
            <!--label for id 实现文本与控件的绑定,
               将label标签的属性for取值为对应控件的id值:
               1.使用label标签表示文本
               2.为相应控件添加id标识
               3.label与控件绑定:for属性值与id属性值保持一致-->
            <input type="checkbox" name="hobby" value="smoke" checked id="smoke">
            <label for="smoke">抽烟</label>
            <input type="checkbox" name="hobby" value="masage" id="masage">
            <label for="masage">保健</label>
        </p>
        <!--隐藏域(了解):将一些服务器端需要,
        但是用户不需要了解的数据提交过去,对用户不可见-->
        <input type="hidden" name="uid" value="001">
        <!--下拉菜单-->
        <select name="city" id="">
            <!--默认选中第一个option,可以手动设置selected表示选中-->
            <option value="beijing">北京</option>
            <option value="shangshai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen" selected>深圳</option>
        </select>
        <!--文件选择框:涉及二进制数据提交,必须使用post方式,
        同时设置编码类型为multipart/form-data-->
        用户头像:<input type="file" name="uimg">
        <p>
            <!--功能按钮-->
            <!--1.提交按钮,点击时提交数据到后台,
           可以设置value属性,表示按钮的显示文本-->
            <input type="submit" value="注册">
            <!--2.重置按钮,点击时将表单还原至初始状态-->
            <input type="reset" value="重填">
            <!--3.普通按钮,需要自定义点击处理-->
            <input type="button" value="点击">
            <!--button标签表示按钮,标签内容即为按钮显示文本
            书写在form中,相当于submit提交按钮;
            书写在表单外,相当于普通按钮,需要自定义点击操作-->
        </p>
        <button>form内</button>
    </form>
    <button>form外</button>
</body>
练习

 

       

 

标签:Web,控件,标签,介绍,表单,前段,设置,属性,页面
来源: https://www.cnblogs.com/maplethefox/p/11146848.html