HTML and CSS

HTML概述

HTML:Hyper Text Markup language 超文本标记语言
超文本:比普通文本功能更加强大,可以添加各种样式
标记语言:通过一组标签,来对内容进行描述.<关键字>

清明

--杜牧

清明时节雨纷纷,

路上行人欲断魂。

借问酒家何处有,

牧童遥指杏花村。

HTML语法规范




    
        
        
      
      
      入门案例
      
      
                    Hellow world
      

标签



          
                     
                      demo1
    

        
            

标题1

标题2

标题3

标题4

标题5
标题6

表格以及输入框属性


注册邮箱:

创建密码:

真实姓名:

性别:

爱好: 篮球 足球 乒乓球 羽毛球

生日:

我现在:

问题详细描述 *必填

文本格式化标签

     定义粗体文本。
     定义大号字。
     定义着重文字。
     定义斜体字。
     定义小号字。
     定义加重语气。
     定义下标字。
     定义上标字。
     定义插入字。
     定义删除字。

html框架标签

1.框架标签不能和body同时出现
2.frameset: border去除框架标签的框 ,示例:border="0"
border="10px" bordercolor="yellow"
3.frame框大小不变:两种情况:
第一种:border ="0"
第二种: noresize="noresize" 不改变大小
备注:scrolling是否显示滚动条
yes 显示
no 不显示
auto 如果内容高度超过屏幕高度直接显示滚动,
4. frame 是框,内容使用src来填充,
定位显示到指定位置: 使用name属性
例如:
点击left.html的标签跳转内容显示在right.html
1.给right.html的frame添加name属性,方便定位。
2.在left.html中使用target目标定位,根据name名查找


        
        
            
            
        
    

其他标签

 
        
        
        
         
        
        
        
        
        

CSS概述:

Cascading Style Sheets:层叠样式表
作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架
CSS 化妆
CSS的简单语法:
在一个style标签中,去编写CSS 内容,最好将style标签写在这个head标签中


    
    
        
        

最新商品

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

最新商品

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

高压锅

$998

CSS的盒子模型

万物皆盒子
内边距:

padding-top:
padding-right:
padding-bottom:
padding-left:

padding: 10px;  上下左右都是10px
padding: 10px 20px;    上下都是10px  左右是20px
padding: 10px 20px 30px;  上  10px  右  20px   下   30px    左   20px
padding: 10px  20px  30px  40px;  上右下左,顺时针方向

外边距:

margin-top:
margin-right:
margin-bottom:
margin-left:

CSS绝对定位:
position: absulte
top:控制距离顶部的位置
left:控制距离左边的位置

步骤分析:
1.总共5部分
2.第一部分是LOGO部分
3.第二部分是导航菜单
4.第三部分是注册部分
5.第四部分是FOOTER图片
6.第五部分是一堆超链接

代码实现:



    
        
        
         
    
    
        
        
会员注册USER REGISTER
用户名:
密码:
确认密码:
email:
姓名:
性别:
出生日期:
验证码:

你可能感兴趣的:(HTML and CSS)