html网页编写基本代码

html结构:

<标记>
内容
<标记>

标记属性:
<标记 属性=属性值 属性1=属性值1>内容<标记>
在网页编写的时候尽量使用小写

<-注释内容->

利用tab给代码缩进

使用实体名称来代替符号。

html基本结构:

<html>文档标记,网页的开始和结束

<head>文件头标记,网页的标题,关键字标记

<title>网页的文件标题标记,网页的浏览器上的主题。

<body>网页主体部分,可以标记p h1 br hr等标记,构成我们所看到的网页。
body的常见属性有 bgcolor,text,link,vlink,alink

<meta>提供页面的元信息,针对SOE的属性,必须的属性是Content
例如 <meta name="key words" content="you key words">,必须放在head元素内。
<meta charset="UTF-8">

文档标记

br 强制换行
p 换段落
center 居中对齐
pre 预格式化
li 列表项目
ul 无序列表
ol 有序列表,可嵌套,可设置type值
dl,dt,dd 定义型列表
hr 水平分割标记
div 分区显示标记,用来编排大段落和格式化表。

文本标记

h1-h6,六个级别的标题格式
font 字体设置标记,三个属性,size,color,face
b,字体加粗
i,斜体字
sub 上标文字
sup 下标文字
tt 打印机字体标记
cite 引用方式,斜体
em 强调,通常显示为斜体
small 可以多个嵌套,会显示多级变小。
big 多级变大
u 下划线字体标记

图像标记

img 图像标记,src 制定图片路径,名称,格式。width 宽,hight高,border边框宽度,alt,加载完成后显示指定的文字,没有下载或者加载失败,文字代替图像显示,搜索引擎通过文字抓取图片。

超链接

href,链接网页视频图片。#aaa,锚链接。
target,blank新窗口打开,seif(默认)在本窗口打开,parent,父窗口打开(多框架),top顶层窗口打开(框架中用)
name指定页面锚链接。

表格标记

  • table,表格标记
  • caption,标题标记,位于table后,tr之前
  • th表头标记,位于首行或者首列
  • td是数据标记,标示单元格内的具体数据。
  • td和th都是单元格标记,必须嵌套tr内
  • th文字默认会被加粗,td不会
    border,表哥边框宽度
    align 表格显示位置left center right
    cellspacing,单元格之间的间距
    cellpadding,单元格内容与单元格边框的显示距离
    frame,控制表格最外层的四条边线。void无边框,above只有上面有,below底部有,hsides顶部和底部有,lhs左侧有,rhs右侧有,vsides左右侧有,box包含全部边框,border包含全部边框
    rules控制单元格之间的分割线,no表示无分割线,all所有分割,rows只有行,clos只有列,groups行列之间有。
    tr标记,bgcolor,align bottom top middle,valign center left right

HTML框架

把浏览器分割开,同窗多页面。
frameset,cols平分数量,rows上下分数量,例如rows="30%,70%"
src 指定加载页面
name 框架名称,链接标记target的所需要参数
noresize表示不能调整框架大小,没有设置表示可以调整
scrolling,是否需要滚动条,auto,yes,no
frameborder,是否需要边框,1显示,0不显示。

表单设计

form 表单标记,定义表单开始位置和结束位置
基本格式form action="service address(表单内容接受地址) " name= method="post|get"
method传送数据的方式,分为post和get,

  • post方式提交,表单中的数据一并包含在表单的主体种,一起传送到服务器种处理,没有数据大小限制。
  • get提交,表单的内容附加在url地址后面,限制提交的长度不能超过8192个字符,不具备保密性。
    action 表单处理程序的url地址,如果为空,则使用当前文档的url地址,如果表单中不需要使用action属性,也要制定其属性为"no"
    enctype设置表单的资料的编码方式
    target和超链接的属性类似,用来制定目标窗口。

按钮:inputtype= submit提交,reset充值 button 普通
radio单选
chekebox复选
单选和复选可以用cheked默认选择好的项目
input type=hidden 隐藏表单域

多行文本域,textarea,cols=? rows=?

菜单下拉select ,option value=value selected

CSS样式的方法

内链式样式表
<body style=background-color:green;margin:0,padding:0;"><body>

嵌入式样式表
style type="text/css"> <style> 需要放在head中

引入式样式表 link rel=stylesheet type=text/css href=style.css

css定义样式表

html标记定义:p,选择器,定义那个标记中的内容执行其中的样式,一个选择器可以控制若干个样式属性,他们之间需要用;隔开,最优一个可以不用加;

class定义:<p class=“p”>....</p>
class定义以“.”开始

ID定义:p id=“p”
以#开始

P{属性:属性值;属性1......}

组合选择器
h1,h2,h3,h4{color:red;font-size:14px;} 组合选择器,可以用","隔开

伪装元素选择器
a:link 正常连接的样式
a:hover 鼠标放上去的样式
a:active选择链接时的样式
a:visited 已经访问过的链接样式

常见属性:
color:#ff6600
color:green
color:rgb(255,255,255)
color:rgba(255,255,255,1) (透明度)

font-size :
px
%根据父元素的百分比
smaller 比父元素更小
larger 同上
inherit 继承父元素
定义字体:font-family:微软雅黑,serif; (可以用“,”隔开,以确保当字体不存在的时候用下一个。用于字体属性。
字体加粗font-weight: normal (400),bold(700) ,lighter(更细),取100-900的整百数。

图片属性:
background-color:

background-image:rul

background-repeat:
repeat 重复平铺满,no-repeat不重复

background-position: 图片位置
center
left,right,top ,bottom
简写方式:
background:#f2f2f2 url(image/bg.gif) no-repeat 20px 20px

边框属性
border-style
border-bottom -style 下边框样式(单独定义其中一个方向的边框)
边框风格样式:
none无边框
solid直线
dashed虚线边框
dotted点状边框
double双线边框
groove凸边框
ridge 垄边框
inset
outset
inherit 继承

border-color 统一风格

border-top-color 上边框颜色(单独风格)

列表属性:
list-style-image 设置图像列表标记,url图像路径,none无图像
简写: list-style:square inside url(XX.jpg)

div和span盒模型

div和span在html表集中存在意义为了用css样式。
div和span的区别在于,span是内联元素,div是块元素。

盒子模型:
外边距margin
内边距padding
边框宽度border
盒子宽度width
盒子高度height

布局相关属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,991评论 1 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,050评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,212评论 0 5
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,525评论 32 459