【javaweb】学习日记Day1 - HTML CSS入门

目录

一、图片标签 

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径 (推荐)

二、标题标签 

三、水平线标签 

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接 

六、视频标签 

七、音频标签 

八、换行、段落、文本加粗

九、页面布局 

1、div

2、span

3、盒子模型

十、表格标签 

十一、表单标签 

1、主体 

2、表单项

(1)input

(2)select

(3)textarea

十二、代码展示


一、图片标签 

  • src:指定图片的url(绝对路径 / 相对路径)
  • width:宽度 (px:像素,%:相对于父元素的百分比)
  • height:高度 (px:像素,%:相对于父元素的百分比)

① 绝对路径

1.绝对磁盘路径

  • 右键图片属性 —— 安全 —— 复制对象名

2.绝对网络路径

  • 右键网页图片—— 在新标签页中打开图片 —— 复制路径

② 相对路径 (推荐)

  • ./    当前目录,可省略
  • ../   上一级目录

二、标题标签 

-

 

三、水平线标签 

四、标题样式

1、CSS引入样式

① 行内样式

写在标签style属性中(不推荐)

② 内嵌样式

写在style标签中(可以写在页面任何位置,通常写在head标签中)

③ 外嵌样式

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

实例:

  


      
      
    页面标题

    
     

    
    



     

    
日常 > 分享

标题样式

标题样式


2023年8月11日 13:14 容宝网

2、CSS选择器

优先级:id选择器 > 类选择器 > 元素选择器

① 元素选择器

元素名称{
    color:red;
}

h1{
    color:red;
}

新闻联播网

② id选择器

#id属性值{
    color:red;
}

#hid{
    color:red;
}

新闻联播网

③ 类选择器

.class属性值{
    color:red;
}

.cls{
    color:red;
}

新闻联播网

实例:

  


      
      
    震惊!!

    
     



     恋爱日常 > 分享

    

震惊!!


2023年8月11日 13:14 容宝网

五、超链接 

容宝网
  • href:指定资源访问的url
  • target:指定在何处打开链接
    • -self:默认值,在当前页面打开
    • -blank:在空白页面打开

实例:

  


      
      
    震惊!!

    
     



     恋爱日常 > 分享

    

震惊!!


2023年8月11日 13:14 容宝网

六、视频标签 

  

七、音频标签 

八、换行、段落、文本加粗


换行

段落 文本加粗 line-height 设置行高 text-indent 首行缩进 text-align 文本水平对其方式   生成一个空格

九、页面布局 

1、div

  • 一行只显示一个(独占一行)
  • 宽度默认是父元素的宽度,高度默认由内容撑开
  • 可以设置宽高(width、height)

2、span

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高( width、height)

3、盒子模型

【javaweb】学习日记Day1 - HTML CSS入门_第1张图片

十、表格标签 
标签 描述 备注

定义表格整体

可以包裹多个

border:规定表格边框宽度
width:规定表格宽度
cellspacing:规定单元格间的空间
表格的行,可以包裹多个
单元格 如果是表头单元格,可以替换为,有加粗和居中效果

【javaweb】学习日记Day1 - HTML CSS入门_第2张图片【javaweb】学习日记Day1 - HTML CSS入门_第3张图片

十一、表单标签 

1、主体 

  • action:表单提交的url,往何处提交数据,如果不指定,默认提交到当前页面
  • method:表单提交方式
    • get:在url后面拼接表单数据,比如?用户名=容也同学&年龄=20,url长度有限制,默认值
    • 
          用户名:
          年龄:
      
          
      

    • post:在消息体中传递,参数大小无限制
    • 用户名: 年龄:

2、表单项

(1)input

  • 表单项,通过type属性控制输入形式

【javaweb】学习日记Day1 - HTML CSS入门_第4张图片

 

(2)select

  • 定义下拉列表,

(3)textarea

  • 定义文本域



    
    
    注册页面



    
用户名:

密码:

性别:

用餐偏好:

生日:

时间:

邮箱:

年龄:

学历:

头像:

个人简介:


【javaweb】学习日记Day1 - HTML CSS入门_第5张图片

十二、代码展示

  


      
      
    震惊!西安居然发生了这种事!

    
     




    
恋爱日常 > 分享

震惊!西安居然发生了这种事!


    2023年8月11日 13:14 容宝网

容宝网消息(聚焦西安):据了解,xx。

xxxxxxx购置了西瓜和葡萄。

由于许xxxx

第二天,xxx

责任编辑:小白 SN242

你可能感兴趣的:(Javaweb,学习,html,css,前端,学习方法)