前端的使用

浏览器——推荐谷歌        解析css,js速度快        支持功能多

HTML        定义一个页面显示什么东西

css        层叠样式表        作用:美化形态

Js        能让页面动起来

第一个HTML页面

<!DOCTYPE html>
<html>
	<head>
		<title>这是我的第一个html页面</title>
	</head>
	<body>
		HelloWorld!!!!
	</body>
</html>

1.html        超文本标记语言

2.<!DOCTYPE html>html文档版本声明->htmls的声明方式必须存在于html页面的首行

3.head中定义的内容是给浏览器识别的一些设置        body中的内容给用户看的显示在页面中的

4.<meta charset="utf-8"> 解码格式  告诉浏览器使用哪一种字符编码格式解析html页面中的内容
   编码与解码保持一致不会出现乱码
5.title标签 
是head中唯一一个能被用户看到内容的标签对
html文档的标题
有利于搜索引擎的优化
在收藏页面的时候,标签名默认title标签对中的内容
6.分类:
双标签|闭合标签 : 标签对中需要定义内容
单标签|自闭和标签 : 标签对中不需要定义内容
7.属性: 帮助更完整的展示标签
属性名 = "属性值"
可以为一对'',可以为一对""
属性要存在空格
8.元素: 标签+内容

            1.a 超链接标签
                属性:
                    href : 链接地址  必填属性
                        相对地址
                        绝对地址
                        # 回到顶部但不刷新
                    title : 当鼠标悬停在内容上时候显示的 提示字
                    target : 打开方式
                        _self : 本页面打开 -> 默认
                        _blank : 新页面打开
                样式:
                    下划线
                    字体颜色:
                        连接未访问: 蓝色
                        连接已访问: 紫色
            2.img 图像标签
                属性:
                    src : 图片地址 -> 必填属性
                        相对地址
                        绝对地址
                    alt : 当图像无法正确加载,显示提示
                    title : 当鼠标悬停在内容上时候显示的提示字
                    width : 宽度
                        单位: 大小长度等单位为px
                        高度没有设置会等比进行缩放,保证图像不失真
                    height : 高度
                    border : 设置边框大小
            
            路径指定:
                进入某个路径下  文件夹名字/
                回到上一层路径  ../
            
            3.h* 标题标签
                h1~h6
                根据权重的不同,大小会一次缩小
                
                样式:
                    字体大小不同
                    加粗
                    独占一行,前后换行
            
            4.p标签
                段落标签
                前后换行
                语义化
                正常显示

标签的分类
                行内元素 : 可以与其他行内元素或者文本同行显示
                    行内元素不可以设置宽高
                    宽高有内容撑起
                    行内元素可以嵌套其他行内元素或者普通文本
                    不能设置上下的内外边距
                    
                块元素 : 独占一行,前后换行
                    可以设置宽高
                    可以嵌套块元素,行内元素,普通文本
                    可以设置上下左右内外边距
        
            5.span 帮助方便的展示元素
                行内元素
                正常显示
            
            6.div 块
                div+css 实现布局
                块元素
            
            7.hr 水平线
            8.br 换行
        

注意: p只能嵌套其他行内与文本

列表
                无序列表
                    ul标签
                有序列表
                    ol标签
                
                li 列表项
                
                列表项标记修改 : 在ul|ol标签上使用type属性修改
                    无序列表的列表项标记 : type :  circle空心圆圈  desc实心圆形    square黑心方块
                    有序列表的列表项标记 :  type : 1 A a I i
                
                ul,ol,li都是块元素,独占一行
                ul,ol中的直接子元素只能为li,li中可以嵌套任意内容
                各种列表都可以任意实现嵌套
                list-style: none; 去除列表项标记    

表格 :
                table 表格标签
                tr 行
                th 表格头单元格   默认加粗居中
                td 表格体单元格
                内容定义在单元格中
                单元格要定义在行中
                先有行,再有单元格,再有内容
                单元格中可以定义任意内容
        
属性:
                border="1" 边框
                align 对齐方式
                    left 左对齐
                    right 右对齐
                    center 居中对齐
                width : 宽度
                height : 高度
                style="border-collapse: collapse;" 双线变单线
                合并单元格:  *****
                    rowspan 跨行
                    colspan 跨列

表单: 收集用户输入的数据
            form 表单标签 
            form标签的属性
                action 标签的提交位置
                name 表单的名字,区分标签
                method 提交方式
                    get 默认  地址栏   不安全   效率高   具有大小限制    
                    post 请求头  安全  没有大小限制
                enctype : 属性规定在将表单数据发送到服务器之前如何对其进行编码。
                    application/x-www-form-urlencoded    默认。在发送前对所有字符进行编码                        (将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值)。
                    multipart/form-data    不对字符编码。当使用有文件上传控件的表单时,该值是必                    需的。
                    
表单元素 : 使用在form标签中的元素
                大部分的表单元素都是通过input标签定义
                type属性的不同,input标签的作用不同
                input type : 
                    text : 普通文本框  name必填
                    password : 密码框  加密效果   name必填
                    radio 单选框 
                        一组内的单选框只能选择一个
                        name属性值相同为一组
                    checkbox : 多选框
                        相同作用的多选框设置一组,name属性值相同为一组
                    file : 文件上传
                    hidden 隐藏框
                    
                    submit 提交
                    button 按钮
                    
常见的属性:
                    id        前台区分元素的唯一,常配合js,css一起使用
                    class   配合css,js一起使用
                    name    后台区分元素的唯一
                         表单元素以键值对的形式发送后台,键值对的key->表单元素的name属                                            性值   键值对的value->就是输入框锁接收到的值
                    value : 表单元素的值,默认值
                    reset : 重置
注意: 如果表单元素想要具有提交能力,必须存在name属性

            fieldSet 元素集
            legend 元素集提示信息
            textarea 多行文本域   name必填
            select  下拉列表
            option  下拉列表选项
            label 定义标注
            
属性:
                maxlength 最大长度
                required 必填属性
                autofocus 自动聚焦
                checked 默认选中(单选,多选)
                selected 默认选中(下拉列表)
                placeholder 提示信息
                readonly  只读   不能修改,可以提交
                diabled   禁用  显示为灰色  不能聚焦  不能提交

HTML 超文本语言

学习各种不同作用的标签

        标签的作业        特点        属性        属性值

常用标签 h p div span a ing...

列表标签

表格标签

表单标签  bgcolor

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值