0
点赞
收藏
分享

微信扫一扫

Web前端基础

毅会 2022-04-22 阅读 80
java

1、三个阶段：

  • web前端
  • 数据库
  • SpringBoot 

 

Web前端-HTML

  • HTML作用： 负责搭建页面结构和内容 （盖房子） 
  • 学习HTML主要学习的就是有哪些标签

文本相关标签

  • h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗
  • p 段落标签, 特点: 独占一行,自带上下间距
  • hr 水平分割线
  • br 换行
  • b 加粗
  • i 斜体
  • u 下划线
  • s 删除线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--特点：字体加粗 独占一行 自带上下间距 -->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容<br>标题6</h6>
<hr>
<!--段落标签p 特点：独占一行 自带上下间距-->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
<hr>
<h3>列表标签</h3>
<h4>无序列表</h4>
<ul>
  <li>刘备</li>
  <li>孙尚香</li>
  <li>孙悟空</li>
  <li>猪八戒</li>
  <li>刘禅</li>
</ul>
<h4>有序列表</h4>
<ol>
    <li>可井</li>
    <li>传奇</li>
    <li>我</li>
    <li>程恒</li>
    <li>好烂</li>
</ol>
<h4>列表嵌套</h4>
<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>东北大拉皮</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>宫保鸡丁</li>
            <li>木须肉</li>
        </ol>
    </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名：<b>苍老师</b></p>
<p>性别：<i>男</i></p>
<p>爱好：<s>摄影</s></p>
<h2>个人经历</h2>
<ul>
    <li>小学9年</li>
    <li>中学6年</li>
    <li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
    <li>知名度最高奖</li>
    <li>达内体重达人</li>
</ol>
</body>
</html>

 

列表标签

  • 无序列表: ul和li 组合 unordered list list item 列表项
  • 有序列表: ol和li 组合 ordered list
  • 列表嵌套: 有序列表和无序列表可以任意无限嵌套 .

图片标签：

src: 资源路径

相对路径: 访问站内资源

  • 图片和页面在同级目录: 直接写图片名
  • 图片在页面的上级目录: ../图片名
  • 图片在页面的下级目录: 文件夹名/图片名

绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险 

alt: 图片不能正常显示时显示的文本

title: 图片标题

width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放

1.像素  2.上级元素百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src资源路径
    1.相对路径：一般访问站内资源时使用
      - 图片和页面在同一目录：直接写图片名
      - 图片在页面的上级目录：../图片名
      - 图片在页面的下级目录：文件夹名/图片名
    2.绝对路径：一般访问站外资源，图片盗链
-->
<!--ait：当图片不能显示时 显示的文本-->
<!--title: 图片标题-->
<!--width/height
两种赋值方式：1.像素 2.上级元素的百分比
只设置宽度时 高度会自动等比例缩放
-->
<img src="a.jpg" title="校徽" width="200" alt="学校校徽">
<img src="../b.jpg" width="200" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png" width="200" alt="">
</body>
</html>

超链接a

  • href: 资源路径, 作用类似图片标签的src
  • a标签包裹文本为文本超链接, 包裹图片为图片超链接
  • 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a id="top" href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a>
<a href="http://www.tmooc.cn"><img src="a.jpg" width="100"></a>
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>

 

表格table

  • 相关标签: table tr表示行 td表示列 th表头 caption标题
  • 相关属性: border边框 colspan跨列 rowspan跨行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <tr><!--table row 表示行  table data 表示列-->
    <td colspan="2">1-1</td><td>1-3</td><td rowspan="2">1-4</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td><td>2-3</td>
  </tr>
  <tr>
    <td colspan="4" align="center">3-1</td>
  </tr>
</table>
<table border="1">
  <tr>
    <td colspan="2">1-1</td><td rowspan="2">1-3</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td><td>2-2</td>
  </tr>
  <tr>
    <td colspan="2">3-2</td>
  </tr>
</table>
<table border="1">
  <caption>购物车</caption>
  <!--th：字体加粗且居中-->
  <tr>
    <th>编号</th><th>商品名</th><th>价格</th>
  </tr>
  <tr>
    <td>1</td><td>小米12 pro</td><td>5000</td>
  </tr>
  <tr>
    <td>2</td><td>华为电视</td><td>4000</td>
  </tr>
  <tr>
    <td>总价：</td><td colspan="2">9000</td>
  </tr>
</table>
</body>
</html>

 

 

表单form

  • 作用: 获取用户输入的各种信息 并提交给服务器
  • 学习form表单主要学习的就是有哪些控件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
    <!--maxlength最大字符长度-->
  用户名:<input type="text" name="username" maxlength="5" value="abc" readonly="readonly"><br>
    密码:<input type="password" name="password"><br>
    <!--value是单选框必须添加的属性 否则提交on  checked默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <!--selected默认选中   value设置提交的内容-->
    <select name="city">
        <option>北京</option>
        <option value="sh">上海</option>
        <option selected>广州</option>
    </select><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

分区标签

  • 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
  • 块级分区标签div: 特点是独占一行
  • 行内分区标签span: 特点是共占一行
  • 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
  • HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
  • header头  footer脚  main主体  section区域  nav 导航 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>块级分区标签1</div>
<div>块级分区标签2</div>
<div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>
</body>
</html>

 

CSS 层叠样式表

  • Cascading Style Sheet
  • 作用: 美化页面(装修)

如何在HTML页面中添加CSS样式代码

  • 三种引入方式:
  • 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
  • 内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用
  • 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h2{color: blue}
    </style>
    <!--引入外部的css样式文件-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

 

 

选择器

  1. 标签名选择器: 选取页面中所有同名标签
  • 格式: 标签名{样式代码}
  1. id选择器: 当需要选择页面中某一个元素时使用
  • 格式: #id{样式代码}
  1. 类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
  • 格式: .class{样式代码}
  1. 分组选择器: 分组选择器可以将多个选择器合并成一个
  • 格式: h4,#id,.class{样式代码}
  1. 属性选择器: 通过元素的属性选择元素
  • 格式: 标签名[属性名="属性值"]{样式代码}
  1. 任意元素选择器: 选择页面中所有标签
  • 格式: *{样式代码}

 

选择器练习:

  1. 把张学友改成绿色
  1. 把刘德华和悟空改成蓝色
  1. 修改取经3人和刘备的背景为黄色
  1. 修改密码框的背景为红色
  1. 给所有元素添加红色的边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #l1{color: green}
        .c1{color: blue}
        h1,h2{background-color: yellow}
        input[type="password"]{background-color: red}
        input[type="text"]{color: purple}
        *{border: 1px solid red}
    </style>

</head>
<body>
<ul>
    <li id="l1">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
</body>
</html>

 

工程的git地址:

teduliu/CGB2202

复制整行快捷键 ctrl+D

注释快捷键 ctrl+shift+/

快速进入下一行 shift+回车

 

举报

相关推荐

Web前端——JavaScript基础

javascripthtml基本数据类型属性值OpenStack云计算

Web前端基础—html

前端html

web前端秘籍，前端开发基础学习

Web开发程序员前端jQuery前端开发

bootstrap前端开发，web前端开发基础

Web开发程序员前端Html/CSS前端开发

web前端开发零基础，web前端开发初级

Web开发程序员前端jQuery前端开发

Web前端开发JavaScript基础

JavaScript 开发笔记javascript数组字符串JavaScript前端开发

web 前端基础小总结

前端htmlcss

web前端基础复习整理

选择器行内元素块级元素Html/CSS前端开发yyds干货盘点

Web前端基础知识

linux运维服务器

Web前端——CSS基础样式

csshtml选择器优先级OpenStack云计算
0 条评论