HTML+CSS基础知识

117 阅读2分钟

HTML

HTML:超文本标记语言

基础知识

HTML结构标签

image.png

特点:

1.HTML不区分大小写 2.HTML标签属性值单双引号都可以 3.HTML语法松散 vs code !(英语模式)可以快捷生成模板

标签

img标签:

src:图片资源路径

路径书写方法:

绝对路径:1.绝对磁盘路径 2.网络路径(访问时必须联网) 
相对路径(推荐):./:当前目录,./可以省略
         ../:上一级目录

width:宽度(px,像素;%,相对于父元素的百分比)

height:高度(px,像素;%,相对于父元素的百分比)

标题标签

h(1-6)

image.png

水平分割线

hr

image.png

注释语句

(快捷键 ctrl+shift+/)

image.png

组合行内元素(无意义)

span标签

超链接标签

(target默认_self,在本标签打开,_blank新建标签页打开)

image.png

image.png

换行标签

br

表格标签

image.png

表单标签

image.png get是在url后面提交(格式为?+数据),提交长度有限制。

post是在消息体(请求体)中,长度没有限制。

image.png 单选按钮要保证几个按钮的name一致,被选中传输的是value的值

页面布局

布局标签:

实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签

image.png

特点:

div标签

1.一行只显示一个(单独占一行)

2.宽度默认是父元素的宽度,高度默认由内容撑开

3.可以设置宽高

span标签:

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

CSS

控制页面样式

color 设置字体颜色

front-size 字体大小(记得加上px)

text-decorattion 规定添加到文本的修饰

段落缩进样式 text-indent

行高 text-height

对齐方法 text-align

CSS引入格式:

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

image.png

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

image.png

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

image.png

image.png

href内写css的相对路径。

颜色表示法:关键词(英文)、rgb表示法、十六进制表示法(#开头)

css选择器

元素选择器 image.png

id选择器 image.png

类选择器 image.png

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

div样式 image.png

运用学到的知识 参照从网络大国阔步迈向网络强国|网络安全|信息化|互联网_新浪新闻 (sina.com.cn)制作的简易网页从网络大国阔步迈向网络强国

image.png

w3school可查阅css属性