A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[技术笔记] HTML总结

© 唐冰寒 初级黑马   /  2018-5-30 19:10  /  650 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML
1.前端的组成:HTML, CSS, JS
2.HTML:用户展示数据的超文本标记语言。
超文本:比普通文本更加强大的文本。
标记语言:指通过一组标签的形式用于描述事物的语言。
3.HTML的作用和使用:用于制作静态页面(其页面数据不是从数据库中得到);在设计网站页面的时候使用。一个HTML文件扩展名以.html或.htm结尾。
4.框架标签
<html>(跟标签)
        <head>(头标签)
                <meta charset="utf-8" />
                <!--告诉浏览器以什么编码打开html文件,如果.html文件是UTF-8,charset="utf-8" ,如果.HTML文件是GBK,charset="GBK"-->
                <title>网页的名字</title>
        </head>
        <body>(体标签)
        </body>
</html>
5.字体标签:<font size="7" face="微软雅黑" color="hotpink">你好张三</font>
6.排版标签
        加粗  <b>加粗</b>
        下划线 <u>下划线</u>
        斜体 <i>斜体</i>
        段落 <p>段落</p> 上下会有间距
        标题 h1 一级标题 h2 二级标题...h6六级标题
        换行 <br/>
        空格  
        居中:center
<pre>标签:原生标签.?
<hr/>标签:横线.
7.HTML5不仅仅是对标签的增强,实际上是对HTML标签+CSS+JS的增强
8.图片标签
        <img src="图片路径" alt="图片不能正常加载提示的文字" width="100" height=""/>
        长度和宽度默认单位PX, PX就是拿放大镜看到的屏幕上的像素点        
9.列表标签
无序标签
        <ul style="list-style: none;">
                <li></li>
        </ul>
黑点显示,list—style:none表示隐藏黑点
有序标签
<ol>
<li></li>
</ol>
数字序号显示
10.超链接
href:链接的路径;target:打开方式
        <a href="http://www.baidu.com" target="_parent">百度</a>
        target:_blank 在新窗口打开
                 _self 在当前窗口打卡
                 _parent 在父窗口打开  明天讲框架标签的时候演示                  
11.表格标签
功能:展示数据和页面布局(过时了)
        td有两个属性 rowspan 合并行, colspan 合并列。表示rowspan=行数;colspan=列数
        <table width="100px" height="100px" border="1px" >
                <tr>
                        <td>第一列</td>
                        <td>第二列</td>
                </tr>
                <tr>
                        <td>第一列</td>
                        <td>第二列</td>
                </tr>
        <table>
12.表单标签
HTML表单标签:<form>
常用属性:
action属性:提交的路径.默认提交到当前页面
method属性:请求的方式.GET和POST.默认是GET.
GET方式和POST方式的区别?
GET:数据会显示到地址栏中,有安全隐患,GET方式提交是有大小的限制.
POST:数据不会显示到地址栏中,比较安全,POST方式提交的是没有大小限制.
文本输入框<input type="text"/>
密码输入框<input type="password"/>
下拉框<select></select>
单选框<input type="radio"/>
多选框<input type="checkbox"/>
文件上传<input type="file"/>
普通按钮<input type="button" value="点我呀"/> <button type="button">点我呀</button>
提交按钮<input type="submit" value="点我呀"/>
          <button type="submit">点我呀</button>
重置<input type="reset" value="点我呀"/>
<button type="reset">点我呀</button>               
文本域<textarea></textarea>?
隐藏域<input type="hidden">?
input标签的属性
        name 表单元素名称,提交数据的必须有name属性,后台才能接受数据
        value 给当前标签设置值的
        maxLength 允许输入字符的最大长度
        readonly 只读        
下拉框设置默认值:
                <select>
                        <option value="1">芒果</option>
                        <option value="0" selected>香蕉</option>
                        <option value="1">榴莲</option>
                </select>               
13.表单标签注意事项
                所有的表单标签都应该嵌套在form标签内
                同一组单选框或者多选框他们的name属性要保持一致
                多选框和单选框设置默认值是checked属性
                下拉框设置默认值是给option添加selected属性
                <textarea>默认值</textarea>
                剩下的input标签设置默认值是通过value指定
14.框架标签
        frameset
                rows = "20%, 80%"
                cols = "20%, *"
        frame
                src 指定要显示的页面
                name 为了方便超链接跳转        
        frameset标签中可以嵌套frame标签和frameset标签,但是用于展示数据的是frame标签
        frame用于展示页面,frameset用于分隔页面
        注意事项:不能和body共存
15.转义字符
         空格
        < 小于号
        > 大于号
16. 开发常用标签 div span a i 列表ul
        div和span标签
                div:块级元素  独占一行,可以设置宽和高
                span:行内元素  一行可以显示多个,不可以设置宽和高
                相互转换
                        块级转行内 :添加样式display:inline;
                        行内转块级: 添加样式display:block;
                        行内块级元素(一行可以显示多个,并且可以设置宽和高):display:inline-block;
                        在开发的时候常用的block,inline-block,inline
        表格布局的缺陷:1.不灵活2.页面加载速度没有div快

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马