超文本标记语言html&花里胡哨css

认识html

本质: html是预定好了一堆标签,这些标签都有特殊含义
这里的"超"指的是"超链接"的意思

它是由"标签"和"属性" 组成

标签分为:
围堵标签:格式为内容

自闭和标签:格式为

属性分为:
样式属性:已被css淘汰,为了满足css, html造出了比较干净的标签:div(块级元素:默认独占一行);span(行内元素:默认在一行中显示);

功能属性:
id:每一个标签都可以使用的属性, 建议这个值唯一, 一般在js中会用这个id属性

class:类别, 一般将多个标签归类, 可以通过css的语法, 进行统一样式控制(类选择器, 使用方式: .类值{ 样式属性 })

name:表单项标签才会使用

value:表单项标签才会使用

img中的src:图片的路径, 可以是本地路径, 也可以是网络路径

a中的href:a标签的跳转路径,可以是本地路径, 也可以是网络路径

常见的标签:(不完全统计根据个人使用习惯)

页面结构:
<html>跟标签
<head>表示头标签
<body>表示身体(标签内容)

文本:
<h1~h6>标题标签, h1最大, h6最小
<p>段落, 段与段之间有空行
<i(em)>字体倾斜
<b(strong)>字体变粗
<u>下划线
<ol></ol>配合<li></li>表示有序标签
<ul></ul>配合<li></li>表示无序标签

图片:<img/>
src:用来指定的路径, 网络路径和本地路径(./表示当前路径;../表示上一级路径)
title:鼠标悬停的时候显示的内容
alt:当图片找不到的时候显示的默认
注意: 图片是有默认宽高比, 但凡改了一方, 另外一方随之改变, 除非两个都指定
图片有可能超出标签的范围, 如何解决: 设置他的宽度为100%, 占满父元素的100%

超链接:<a></a>
 href:编写路径,网络路径和本地路径,路径的写法和img的src一模一样
 target:_self(默认值)在当前页打开;_blank;在新的窗口打开
 缺点: 自带了下划线:可以用text-decoration:none;取消下划线
 优点: 自带了鼠标变小手的样式

圈定一个范围, 该范围中所有的表单项都会被提交:<form>
action:和img中的src, 以及a标签的href一模一样的用法, 指定表单提交的地址
method:(get:参数在地址栏中显示,数据长度有限制;默认值是get
        post:参数不在地址栏,数据长度没有限制)
autocomplete:on(默认值,显示历史记录) off(不显示历史输入)

携带数据给服务器的表单项:<input>
type:text;(默认值)表示普通文本输入框
	submit;用来提交表单的
	reset;重置
	button;普通按钮, 没有任何功能
	password;密码输入框内容被符号替代
	radio;(单选框,要求多个单选, name一定要一致, 必须手动给定value属性的值)
	checkbox;(复选框,要求多个多选, name一定要一致, 必须手动给定value属性的值)
	hidden;(隐藏字段, 可以提交一些必要的数据, 而这些数据,不需要用户填写或者选择, 但是后台必须要这些参数才能正常运行)
	file;上传时候才会用到
name:必须给定name值
value:默认值, 或者用户填写的值
id:(经常和js结合使用, 可以和label中for属性对应, 能达到, 点label, 让表单项获取焦点的目的)
下拉项<select></select>:配合<option>内容</option>
注意:option中的内容就是value的值, 但是如果对其不满意, 可以给定value值;属性multiple="multiple"可以让下拉框实现多选
文本域<textarea rows="2" cols="2">默认显示行和列,在网页中可以调节

布局:<div></div>默认独占一行, 想要在一行上, 可以使用float浮动
其他:<br/>换行  <hr/>水平横线

css

通过使用 CSS 来我们可以大大提升网页开发的工作效率!CSS 同时控制多重网页的样式和布局。

css的三种引入方式
第一种使用方式:在每一个标签中都有style属性, 可以编写css的代码, 但是缺点是 只能控制一个标签,有局限性,不推荐使用

第二种使用方式:在