首页 > 代码库 > HTML基础

HTML基础

2024-11-19 18:59:02   203人阅读


html:超文本标签语言
　　超文本:超越了一般文本,描述文本的字体 颜色 图片
　　标签:标记
html书写规则:
　　文件的后缀名 .html(建议) 或者 .htm
　　标签必须用 <> 引起来 已经定义好的标签
属性
　　　格式: key="value"
　　建议属性的值用引号引起来.
　　不区分大小写
注意:
　　最好将所有的内容放在一个标签中 <html></html>
　　有开始标签和结束标签的标签称之为围堵标签　　
　　没有结束的标签的称之为空标签 <br/>
　　开始标签和结束标签之间的内容称之为标签体.
　　<!--注释内容--> html页面中的注释
　　标签必须正常嵌套,
　　标签最好关闭
文件标签:
　　html标签:  声明当前网页为html页面
　　　　子标签:
　　　　<head></head>　　head:用来存放当前页面的重要信息,一般不展示在html页面上

　　　　　　子标签 <title></title> 网页的标题

　　　　　　　　　<meta charset="UTF-8">指定浏览器用什么编码打开此页面　　　　<body></body>

body:
　　要展示的数据放在body中
标题标签:
　　<hn></hn>
　　n取值 :1~6    h1最大 h6最小, 自动换行 且留白 默认加粗
常用属性:
　　align:对齐方式   　　left:左 right:右 center:居中
格式:
　　<h2 align="center"></h2>

字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
　　<font></font>
常用属性:
　　face:字体
　　size:尺寸
　　color:颜色
颜色的取值:(RGB)
　　方式1: #xxxxxx x为16进制
　　方式2: 英文单词 red green black
段落标签:
　　<p></p> paragraph
其他标签:
　　<b></b> bold <strong></strong>加粗
　　<i></i> 斜体
　　 <hr/> horizon  水平线

　　<br/> break   换行

//////////////////////////
案例1-步骤分析:
1.新建一个html页面
2.标题标签
3.添加一个水平线
4.4个段落
5.添加字体颜色 加粗 斜体

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>公司简介</title>
    </head>
    <body>
        <h3>公司简介</h3>
        <hr/>
        <p>
            <font color="red">“中关村黑马程序员训练营”</font>是由<b>传智播客</b>联合
            <i><strong>中关村软件园、CSDN</strong></i>，并委托传智播客进行教学实施的软件开发高端培训机构，
            致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 
            目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，
            并被评为中关村软件园重点扶持人才企业。
        </p>
            
        <p>
            黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。
            黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
            必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、
            压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。
            百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险
        </p>
        
        <p>
            中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，
            并密切关注技术革新，不断引入先进的技术，研发更新技术课程，
            确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念
        </p>
        
        <p>
            一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，
            致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。            
        </p>
        
    </body>
</html>
View Code

图片标签:★
　　<img/>
常用属性:
　　★src:图片的路径
　　alt:替代文字
　　title:移上去显示的文字
　　width:宽
　　height:高
大小的写法:
　　1 像素:123px
　　2 百分比:20%
路径的写法:
　　相对路径:
　　　　./ 或者 什么都不写 当前目录
　　　　../ 上一级目录
　　绝对路径:
　　　　带协议的绝对路径:

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="./img/logo2.png" title="hiema" alt="logol" height="55px"/>
        <img src="img/header.jpg" title="header" alt="header" height="55px"/>
    </body>
</html>
View Code

列表标签:

<ol></ol> 有序  order list
<ul></ul> 无序  unorder list
　　常用的子标签
　　　　<li></li> 列表项

　　属性 type 


超链接标记
　　<a></a>
常用属性:
　　href:跳转路径
　　target:在那里打开， 默认值:_self ，   _blank(在空白页面打开)

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h4>友情链接</h4>
        <ol type="1">
            <li> <a href="www.zhong" target="_blank">中关村</a></li>
            <li> <a href="http://www.itheima.cn" target="_blank">黑马程序员</a></li>
        </ol>        
    </body>
</html>
View Code


表格标签★
　　<table></table>
常用的子标签
　　<tr></tr>  table row
　　常用子标签:
　　　　<td>:列  table data cell 单元格
　　　　<th>:表头单元格 默认居中加粗

table常用属性:
　　border:边框 像素值
　　align:表格对齐方式
tr 的常用属性:
　　align:内容对齐
td 的常用属性:
　　align:内容对齐
　　colspan:跨列合并 值:合并的列数
　　rowspan:跨行合并
步骤分析:
1.创建一个8行1列的表格
2.在第一行 放logo，嵌套一个1行3列的表格
3.第2行 放菜单
4.第3行 放图片
5.第4行 热门商品，嵌套一个2行7列的表格
6.第5行 放广告图片
7.第6行 最新商品，嵌套一个2行7列的表格
8.第7行 放一个图片
9.第8行 两个段落

案例5-表单页面
需求:
设计一个表单页面,用来收集用户的数据
技术分析:
表单标签
表单标签★★★
<form></form>
作用:
用来从浏览器端收集用户的信息.
步骤分析:
1.在页面中间添加一个表格
2.10行3列表格
3.在表格中添加表单表单子标签
/////////////////////////////////
案例6-后台管理页面(了解)
需求:
开发一个后台管理页面,通过frameset实现
技术分析:
frameset:框架集
frame:具体实现
frameset:框架集(了解)
常用属性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url

//////////////
补充:
转义字符:
三部分构成 &实体;
掌握的转义字符:
> &gt; //great then
< &lt;
& &amp;
空格 &nbsp;

 

 

 

 

 

 

 

 

 

 

 

 


/////////////////////////////////////////////
上午回顾:
html
文件标签:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
排版标签:
p
br
hr
字体
font
h1~h6
b
strong
i
图片★
<img src="http://www.mamicode.com/图片路径" alt="替代文字" width="" height=""/>
超链接★
<a href="http://www.mamicode.com/跳转路径" target="_blank">xxxx</a>
列表
<ol></ol>
<ul></ul>

列表项
<li></li>
表格标签★★
<table border="" width="" align="">
<tr>
<td></td>
</tr>
</table>

td中的重要属性:
colspan:列合并
rowspan:行合并
表单标签★★★
form
常用属性:
action:提交路径
method:提交方式 get和post
常见的子标签:
input
select
textarea
input标签:
10中type
text
password
radio
checkbox
file
submit
reset
button
hidden
image
若想将内容发送到服务器,必须有name属性 username=tom
select标签:
<select name="">
<option value="http://www.mamicode.com/提交到服务器的值">展示内容</option>
</select>
textarea:文本域
格式:
<textarea cols="" rows="" name=""></textarea>
框架(了解)
frameset:定义框架集
常用属性:
cols:
rows:
常见的子标签:
frame
frame:具体展示
常用属性:
src:展示网页的url
name:给当前的frame起个名称

 

 

 

 

 

 



HTML基础


联系
我们