Contents

hyper text markup language 超文本标记语言，是最基础的网页开发语言。网页文件后缀名以.html/.htm结束。

基本标签

文件标签

<!DOCTYPE html>：html5 中定义该文档类型是html文档
<html>：html 文档的根标签
<head>：头标签，用于指定 html 文档的一些属性，引入外部的资源。
<title>：标题标签
<body>：体标签

文本标签

注释：<!-- 注释内容 -->
<h1> to <h6>：标题标签，字体大小逐渐递增
<p>：段落标签
<br>：换行标签
<hr>：水平线,属性：color,width,size,align(center,left,right)
<b>：字体加粗
<i>：字体斜体
<font>：字体标签,属性：color,size,face
<center>：文本居中

属性定义

color:

1. 英文单词：red,green,blue

2. rgb(值1,值2,值3)：值的取值范围：0~255。 如rgb(0,0,255)

3. #值1值2值3：值的范围：00~FF之间。如 #00FF00

width:

1. 数值 width = '20'，数值的单位默认是px像素

2. 数值%：占比相对于父元素的比例。

图片标签

<img>：图片标签，属性：src,alt,align,width,height
相对路径：以.开头的路径，eg：./代表当前路径，../代表上一级目录

列表标签

<ol>：有序列表外层标签
<ul>：无序列表外层标签
<li>：条目标签，包含属性 type

链接标签

<a>：超链接标签
属性：href：访问资源的 URL ,target：打开资源的方式(_self默认值,_blank)

div和span

<div>：每一个 div 占满一行，块级标签
<span>：文本信息在一行展示，行内标签

语义化标签

语义化标签是 html5 之后出现的新特性，目的是为了提高程序的可读性
<header>：页眉
<footer>：页脚

表格标签

<table>：定义表格标签
属性：
width,border,bgcolor,align
cellpadding：单元格内容与单元格的距离
cellspacing：定义单元格之间的距离，如果指定为0，则单元格线会合并为一条
<tr>：定义行
<td>：定义单元格
<th>：定义表头单元格
<caption>：表格标题
<thead>：表格中表头内容，类似语义化标签，目的为增强代码可读性
<tbody>：表格表体内容
<tfoot>：表格脚注

表单标签

用户采集用户输入的数据，和服务器进行交互。

表单体标签

<form>：可以定义一个范围，范围代表采集用户数据的范围。
属性：
action
method：请求方式有7种，一般使用 get，post
name：(不指定无法提交表单项中的数据)

表单项标签

<input>：可以通过 type 属性改变元素展示的样式。
type属性值：
text：文本
password：密码
radio(value属性指定提交的值,checked指定默认值),
checkbox(value属性指定提交的值,checked指定默认值),
placeholder：提示文字
file：选择文件框
hidden：隐藏域，用于提交一些信息。
submit：提交按钮
button：普通按钮
image：图片提交按钮，src属性选择图片路径
color：取色器
date：日期选择
datetime-local：带时分日期选择
email：邮箱
number：数字选择
<label>：指定输入项的文字描述信息，其for属性一般会和 input 的 id 属性对应。这样点击 label 后 input 则会获取到焦点。
<select>：下拉列表
<option>：下拉列表中的子选项,value属性用于指定提交的值
<textarea>：多行输入框，属性rows，cols用于指定行数和每行显示的字符数。

CSS

概念

大专栏  HTML 和 CSS 基础>Cascading Style Sheets 层叠样式表，多个样式可作用在同一个 html 元素上，同时生效。

使用

内联样式

在标签内使用style属性指定 css 代码
eg：

1
 
<div style="color:red;">hello css</div>

内部样式

在head标签内，定义style标签 style 标签体内容就是 css 代码
eg：

1
2
3
4
5
6
 
<style>
    div{
        color:blue;
    }
</style>
<div>hello css</div>

外部样式

1.定义 css 资源文件
2.在head标签内，定义link标签，引入外部的资源文件
eg：
.css文件

1
2
3
 
div{
 color:green;
}

.html文件

1
2
 
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>

CSS语法

格式：

1
2
3
4
5
 
选择器 {
    属性名1:属性值1;
    属性名1:属性值1;
    ...
}

注意：每一对属性需要使用;隔开，最后一对属性可以不加;

选择器

筛选具有相似特征的元素

  • 基础选择器
  1. id选择器：选择具体的 id 属性值的元素，建议在 html 页面中 id 值唯一；语法：#id属性值{}
  2. 元素选择器：选择具有相同标签名称的元素；语法：标签名称{}，注意 id 选择器优先级高于元素选择器
  3. 类选择器：选择具有相同的 class 属性值的元素.class属性值{}，注意类选择器优先级高于元素选择器，低于 id 选择器
  • 扩展选择器
  1. 选择素有元素；语法：*{}
  2. 并集选择器；语法：选择器1,选择器2{}
  3. 子选择器：筛选选择器1元素下的选择器2元素；语法：选择器1 选择器2{}
  4. 父选择器：筛选选择器2的父元素选择器1；语法：选择器1 > 选择器2{}
  5. 属性选择器：选择元素名称,属性名=属性值的元素；语法：元素名称[属性名="属性值"]{}
  6. 伪类选择器：选择一些元素具有的状态；语法：元素:状态{}

属性

  1. 字体、文本
    font-size：字体大小
    color：文本颜色
    text-align：对齐方式
    line-height：行高
  2. 背景
    background：背景，属性url可以指定图片路径
  3. 边框
    border：设置边框，复合属性
  4. 尺寸
    width：宽度
    height：高度
  5. 盒子模型：控制布局
    margin：外边距
    padding：内边距，默认情况下调整内边距会影响整个盒子的大小，这时可设置box-sizing:border-box;确定盒子的指定宽高为最终大小
    float：left,right

HTML 和 CSS 基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. lr cc安装后提示“内部出现错误，无法创建文件夹”的解决办法

    好多人在使用lr过程中提示“内部出现错误,无法创建文件夹”,今天MacW小编给大家带来了解决的方法,一起来看看吧! 1.此问题主要是用户权限的问题. 下载这个shell 脚本,此 shell 脚本可自 ...

  2. day55-mysql-用户权限、修改秘密、忘记密码

    .用户权限:新创建的用户没有库,如果想让新用户访问我的库,必须给它授权才可以.我在使用的navicat要关闭新用户的连接才可以授权给它. .创建用户 '; -- 创建用户 .移除用户 drop use ...

  3. Keywords|Result|Final check

    科研论文写作 风格最好是excited,不要过于谦虚. Reference不要过多引用自己的paper,可以多引用本刊物的paper. Acknowledgement:感谢帮助input的人员,可以n ...

  4. inotify+rsync实时同步

    主服务器上安装inotify和rsync,备用服务器上安装rsync 主服务器上修改/etc/rsyncd.conf配置文件 三. 创建密码文件,防火墙设置,客户端和服务器端都要做如下操作 echo ...

  5. linux chmod命令修改文件权限

    在linux中,使用chmod命令修改一个文件的权限. 首先,我们查看一个文件夹下所有文件的权限 ls -l linux文件或目录的权限分为,读.写.可执行三种权限.文件访问的用户类别分为,文件创建者 ...

  6. Xcode查看iOS崩溃与崩溃日志分析

    一.造成崩溃的原因 1.代码中存在bug 2.Watchdog 超时机制 3.用户强制退出 4.低内存终止 5.其他违法系统规则的操作,大部分是内存问题 二.崩溃的类型 1.信号错误类 (1)EXC_ ...

  7. BCM93349DCM 手动升级 Fireware 指导

    PC:Personal Computer(这里用的Win7) CM:Cable MODEM(芯片:BCM93349DCM) 一.预置条件 1.PC上已安装TFTP Server,比如tftpd32: ...

  8. iOS多种刷新样式、音乐播放器、仿抖音视频、旅游App等源码

    iOS精选源码 企业级开源项目,模仿艺龙旅行App 3D立体相册,可以旋转的立方体 横竖屏切换工具,使用陀螺仪检测手机设备方向,锁屏状... Swift版Refresh(可以自定义多种样式)架构方面有 ...

  9. StartDT AI Lab | 视觉智能引擎——从Face ID说起，浅析顾客数字化

    “顾客就是上帝”,这句西谚揭示了顾客占据着商业活动中心地位这一客观规律.为了能更好地服务顾客,优化商家自身的服务与产品,对顾客的分析与需求调研一直是商业经营分析中的重中之重. 在商业互联网化.社会数字 ...

  10. 102）PHP，目录操作

    基本的操作: 创建目录: mkdir(目录地址,权限,是否递归创建=false); 注意第二个参数在windows系统下没有作用, 递归创建,就是多级目录,要是设计不存在目录,就自动创建 删除目录 R ...