javaWeb开发之前端开发
1.HTML
HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签"<标签名>"构成的语言
2.CSS
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式(表现)。
3.HTML CSS JavaScript
Html:负责网页的结构
Css：负责网页的表现
JavaScript：负责网页的行为
4.HTML快速入门
1.新建文本文件，后缀名改为.html
2.编写HTML的基本骨架，定义标题
3.在<body>中填写内容
HTML标签特点：
html标签不区分大小写，建议小写
html标签的属性值使用单引号/双引号都可以
html语法结构松散，但是建议规范书写
5.常见标签及样式
html页面在渲染展示的时候，是从上往下逐行解析展示的。所以，编写页面的时候，根据页面的布局，从上往下编写。
标题标签：<h1> - <h6>
超链接标签：<a href="" target="">...</a>
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
6.CSS样式
CSS引入方式：
行内样式：写在标签的style属性中（配合JavaScript使用）
如：<spanstyle="color: gray;">2024年05月15日20:07</span>
内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
颜色表示形式：
样式选择器：
CSS样式选择器用来选取需要设置样式的元素（标签）的。
元素选择器：标签名{...}
选择页面上所有的<h1>标签
类选择器：.class属性值{...}
选择页面上所有class属性为cls的标签
id选择器：#id属性值{...}
选择页面上id属性为hid的标签
优先级：id选择器->类选择器->元素选择器
7.其他常用标签
资源路径写法：
绝对路径：绝对磁盘路径（D:/xxx.jpg）； 绝对网络路径（https://xxx.jpg）
相对路径： 当前目录：./ (可以省略) ； 上一级目录：../
字符实体：
 ：空格
<：<
>：>
CSS属性：
line-height：设置行高 text-indent：首行缩进
8.盒子模型
你是一名前端开发工程师，如何设置html网页的整体页面占版面的70%，并居中显示。
这个需求就需要引入盒子模型。
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
布局标签：网页开发中，会使用div和span这两个没有语义的布局标签。
<div>标签：
一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）
<span>标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）
8.flex布局
控制空间分布和对齐能力
flex是flexible Box的缩写，意为"弹性布局"，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式。
9.表单标签
表单：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：<form>
表单项：不同类型的input元素、下拉列表、文本域等。
<input>：定义表单项，通过type属性控制输入形式(text/password/...)
<select>：定义下拉列表
<textarea>：定义文本域
属性：
action：规定当提交表单时向何处发送表单数据，URL
method：提交方式。get post
get：默认，表单数据会出现在url后面，形式：/save?name=Tom&age=18
post: 表单数据会在消息体/请求体中提交到服务器
注意：表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字
表单项：
<input>：表单项，通过type属性控制输入形式。
<select>：定义下拉列表，<option>定义列表项。
<textarea>：文本域
10.表格样式
<table>：定义表格整体
<thead>：用于定义表格头部(可选)
<tbody>：定义表格中的主体部分(可选)
<tr>：表格的行，可以包裹多个<td>
<td>：表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为<th>
11.总结
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
6
0- 0
已为社区贡献3条内容
所有评论(0)