Web-HTML和CSS
HTML和CSS
HTML
- Hyper Text Markup Language: 超文本标记语言
- 超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)
- 作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)
- 学习HTML主要学习的就是有哪些标签,以及标签的使用方式
文本相关标签
内容标题h1-h6
特点: 独占一行, 字体加粗, 自带上下间距
段落标签p
特点: 独占一行, 自带上下间距
水平分割线hr
换行br
加粗b
斜体i
下划线u
删除线s
列表标签
- 无序列表:ul和li
- 有序列表:ol和li
- 列表镶嵌:有序列表和无序列表可以任意无限嵌套
图片标签img
src:资源路径
- 相对路径: 访问站内资源
- 资源和页面同级目录: 直接写文件名
- 资源在页面的上级目录: …/文件名
- 资源在页面的下级目录: 文件夹名/文件名
- 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险
- 相对路径: 访问站内资源
alt:当图片不能显示时显示的文本
title: 图片标题
width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例
缩放
超链接a
- 相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头
- 相关属性: border边框 rowspan跨行 colspan 跨列
表单form
作用: 获取用户输入的各种信息并提交给服务器
学习form表单就是学习form表单中有哪些控件.
相关代码：
<!--action设置提交地址--> <form action="http://www.tmooc.cn"><!--placeholder占位文本 maxlength最大字符长度value设置初始值 readonly只读--> 5 用户名:<input type="text" maxlength="5" value="abc" readonly 6 name="username" placeholder="请输入用户名"><br> 7 密码:<input type="password" name="password" placeholder="请输入密码"><br > 8 <!--单选框的value属性必须写 否则提交的是on 9 checked设置默认选中-->性别:<input type="radio" checked name="gender" value="m" id="r1"><label for="r1">男</label>
<input type="radio" name="gender" value="w" id="r2"><label for="r2">女</label><br><!--多选框和单选框的属性通用-->兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟<input type="checkbox" name="hobby" value="hj">喝酒<input type="checkbox" name="hobby" checked value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>靓照:<input type="file" name="pic"><br>城市:<select name="city"><option value="bj">北京</option><option value="sh" selected>上海</option><option value="gz">广州</option>
</select><br>
<input type="submit" value="注册"><!--重置按钮--><input type="reset"><!--自定义按钮--><input type="button" value="自定义"></form>
分区标签
分区标签可以理解为一个容器，用来装多个有相关性的标签, 对多个标签进行统一管理
如何对页面进行分区?
一个页面至少分为3大区: 头 体 脚 , 每个大区里面有n个小的分区
常见的分区标签:
- div:块级分区标签, 特点: 独占一行
- span: 行内分区标签, 特点: 共占一行
HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性
- header 头
- main 主体
- footer 脚
- section 区域
- nav 导航
CSS
- Cascading Style Sheet层叠样式表: 美化页面 (装修)
如何在html页面中添加CSS样式代码
三种引入方式:
内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当
前页面复用不能多页面复用
外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实
现多页面复用
工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离
开, 学习过程中内部用的多
选择器
- 标签名选择器: 选取页面中所有同名标签
- 格式: 标签名{样式代码}
- id选择器: 当需要选择页面中某一个元素时使用
- 格式: #id{样式代码}
类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类
选择器进行选择
- 格式: .class{样式代码}
- 分组选择器: 将多个选择器合并成一个选择器
- 格式: h1,#id,.class{样式代码}
- 属性选择器: 通过元素的属性选择元素
- 格式: 标签名[属性名=‘值’]{样式代码}
- 任意元素选择器: 匹配页面中所有的元素
- 格式: *{样式代码}
- 子孙后代选择器: 通过元素和元素之间的关系选择
格式: body div p{样式代码}
匹配body里面的div里面的所有p包括后代p
- 子元素选择器: 通过元素和元素之间的关系选择
- 格式: body>div>p{样式代码}
匹配body里面的div里面的p子元素 不包含后代p
- 伪类选择器: 此选择的是元素的状态,包括：未访问,访问过,悬停,点击
- 格式: a:link/visited/hover/active{样式代码}
Web-HTML和CSS相关推荐
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- 小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分 享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
- Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础 切图流程 PC企业站布局 PC游戏站布局 溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法 兼容与hack 风生水 ...
- Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- Web前端，CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
- Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言 持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍 我们的网页常见布局方式有:标准流.浮动. ...
- web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局 注意:引入jquery的jquery-2.1.4.min.js包 图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
- Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言 持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡 背景图片大小 background-size:宽度 高度; 设置背景图片的大小 取值 场景 数字+px ...
最新文章
- 我第一次接私活，就被骗了···
- MyBatis+Mysql实现从记录表中统计符合条件的人数
- python已经取代了excel_Python已经取代Excel？网友：笑了
- 【数据结构与算法】之深入解析“石子游戏II”的求解思路与算法示例
- ssh连接出现：WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
- python观察日志(part10)--__future__ 模块
- Android学习手记(2) Activity生命周期
- js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
- 单独编译apache的rewrite模块
- windows API 菜鸟学习之路（一）
- http --- 从输入URL到页面加载的过程发生了什么？
- AJAX 跨域访问 — 方法大全
- IoTDB常用的SQL语句大全
- PaddleOCR实现车牌识别系统
- EAS BOS 序时簿做组织单元隔离
- springboot项目部署后项目启动慢
- fanuc机器人自动程序前怎么回原点_FANUC机器人宏程序自动运行的方法及启动宏程序的步骤教程...
- 3.Linux文件系统
- Nginx如何跳转到非443端口的https
- ERROR Failed to send requests for topics