HTML实战

HTML实战

标题

  • 标题排版

HTML实战_第1张图片

img标签路径书写的两种方式:

  1. 绝对路径

    1. 绝对磁盘路径:C:\User…
    2. 绝对网络路径:https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
  2. 相对路径

./ : 当前目录
../ : 上一级目录

宽度和高度
设置一个宽度,高度会等比例缩放
单位:px 或者 %

  • 标题样式

使用css来控制样式

  • 行内样式:对一个标题生效
  • 内嵌样式:写在style标签中,通常写在head标签中
  • 外联样式:写在一个单独的css文件中,通过link来引入

HTML实战_第2张图片

span 行内标签进行包裹

CSS选择器:

  1. 元素选择器 h1 a span
  2. id选择器
    image.png

image.png

  1. 类选择器
    image.png

优先级: id > 类 > 元素

  • 超链接
    HTML实战_第3张图片
    image.png

正文

视频、音频

HTML实战_第4张图片
image.png

css

首行缩进 text-indent : 50px
行高 line-height : 50px

整体布局

盒子模型

HTML实战_第5张图片

padding:内边距
border:边框区域
margin:外边距区域

div和span标签

  • div标签
    HTML实战_第6张图片
  • span标签

HTML实战_第7张图片

表格标签

HTML实战_第8张图片

表单标签

HTML实战_第9张图片
HTML实战_第10张图片

表单项

input
HTML实战_第11张图片

select和textarea
HTML实战_第12张图片

你可能感兴趣的:(javascript,java,开发语言)