JavaWeb开发1

JavaWeb

什么是web?

全球广域网，能够通过浏览器访问的网站

Web网站工作流程

Web前端开发

网页有哪些部分组成？

文字，图片，音频，视频，超链接...

我们看到的网页本质是程序员写的前端代码

前端代码如何转换成用户眼中的网页？

通过浏览器解析和渲染

浏览器中对代码解析渲染的部分称为浏览器内核

Web标准

• HTML：负责网页结构（页面元素和内容）

• CSS：负责网页的表现（页面元素外观，位置等页面样式，如颜色、大小）

• JavaScript：负责网页的行为（交互效果）

HTML CSS

HTML：超文本标记语言，除了文字还可以定义图片、音频等。由标签构成的语言，HTML标签预先定义好。展示超链接。

CSS：层叠样式表，控制网页样式

    
    


hello

HTML特点

• 标签不区分大小写

• 标签属性值单双引号都可以

• 语法松散

图片标签

• src：指定图片URL（绝对路径/相对路径）

• width：图像的宽度（像素/相对于父元素的百分比）

• height：图像的高度（像素/相对于父元素的百分比）

标题标签

-

水平线标签

---

    
    


hello









 >正文
焦点访谈

2024-10-16

CSS

• CSS引入方式

  • 行内样式：写在标签的style属性中(不推荐)

  • 内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

  • 外联样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)

颜色表现形式

• 关键字：预定义的颜色名。red green

• rgb表示法：红绿蓝三原色，每项取值范围：0-255 rgb(0,0,0)

• 十六进制表示法：#开头，将数字转换成十六进制表示 #000000

    
    
    内嵌样式
    
​




hello









 >正文


你1

2024-10-16

h1{
    color: red;
}

CSS选择器

• 元素选择器

  元素名称{
      color:red;
  }

• id选择器

  #id属性值{
      color:red;
  }
  ​
  
      
  

• 类选择器

  .class属性值{
      color:red;
  }
  ​
  
      
  

同时存在id选择器优先级最高，类次之，最后为元素选择器

设置字体大小

标签

在开发网页时大量用到的没有语义的布局标签

一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

超链接标签

XXX

href：指定资源访问的url

target：指定在何处打开资源链接

_self：默认值，在当前页面打开

_blank：在空白页面打开

    
    
    内嵌样式
    
​




hello









 >正文


你1
 正文

2024-10-16

text-decoration：规定添加到文本的修饰，none表示定义标准的文本