html基础_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 12:05:35

1443人浏览过

来源于php中文网

原创

一、html的基本标签
1、html文件的基本结构
a、html : hypertext markup language 超文本标记语言

 1  2  3  4  5     网页标题 6  7  8  主体  9 10

b.基本结构:头部(head) 主体(body)

c.所有内容都在标签之内

内放的是头部信息，是对页面的描述，不会直接显示在页面中

立即学习“前端免费学习笔记（深入）”；

内的中设置的是页面的标题，只能放在中

是页面的主体，大部分显示内容都定义在这里

 d.编辑工具：记事本、UltraEdit等,开发人员用VisualStudio写html就够了2.块级标签(基本的)  a.标题标签~
  段落标签   水平线标签
  b.常用于页面布局的块级标签：有序列表  无序列表  定义列表  表格标签  表单标签  分区标签3.行级标签  a.图像标签@@##@@   超链接标签   范围标签   换行标签
  输入框标签   文本域标签  b.常见的图片格式: JPG  GIF  BMP  PNG  C.语法:@@##@@</pre>   <pre class="precsshui">4.常使用如下四种块状结构：  a.Div-ul(ol)-li：用于分类导航或菜单等场合  b.Div-dl-dt-dd：用于图文混编场合  c.Table-tr-td：用于规整数据的显示  d.Form-table-tr-td：用于表单布局的场合5.XHTML1.0的基本规范：  a.标签名和属性名称必须小写  b.HTML标签必须关闭  c.属性值必须用引号括起来  d.标签必须正确嵌套  e.必须添加文档类型声明：</pre>   <p class="sycode">          ①该声明必须位于HTML文档的第一行   </p>   <p class="sycode">           ②有三种级别声明：Strict(严格类型)   Transitional(过度类型)   Frameset(框架类型)   </p>   <p class="sycode">    <strong>二、HTML的基本标签(二)和表单</strong>   </p>   <p class="sycode">       1.超链接: <a href="%E9%93%BE%E6%8E%A5%E5%9C%B0%E5%9D%80%E7%9A%84%E8%B7%AF%E5%BE%84" target="目标窗口位置"></a>    (target常用取值:_self(自身窗口)和_blank(新建窗口))   </p>   <p class="sycode">       2.超链接的三类应用场合:       </p>   <p class="sycode">          a.页面间链接  :  A页到B页,用于网站导航   </p>   <p class="sycode">          b.锚链接  :  A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置   </p>   <p class="sycode">    </p>
<p class="sycode">     <pre class="precsshui">1 <a href = "#star">[明星专区]</a>2 3 <!-- 链接到同一个网页的特定位置 -->4 <a name = "star">@@##@@a></pre>    </p>    <p>     c.功能性链接  :  在页面中调用其他程序功能</p>    <p class="sycode">     <pre class="precsshui">1 <!--例:电子邮箱链接,mailto:创建电子邮箱链接-->2 <a href="mailto:guimeiWebMater@gmgw.com">站长信箱</a></pre>    </p>    <p>    3.HTML注释：<!-- 内容  --> </p>    <p>    4.html中的特殊符号:</p>    <p>      a.空格( )   大于号(>)   小于号(    </p>
<p>    5.表单</p>    <p>       a.语法格式:         </p>    <p class="sycode">     <pre class="precsshui">1     <!--2         1.get  是指将用户填写的信息作为一个字符串连接到地址栏一起提交，连接符用"?"隔开3         2.post 是指将用户填写的信息作为一个数据包提交，数据包是经过编码的4         -->5     <form action="表单提交地址" method="提交方法(1.get  2.post)">6            <!--文本框.按钮等表单元素-->7     </form></pre>    </p>    <p>      b.表单元素的基本格式:</p>    <p class="sycode">     <pre class="precsshui">1  <!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->2 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" /> </pre>    </p>    <p>   6.表单元素介绍</p>    <p>     a.文本框(text)</p>    <p class="sycode">     <pre class="precsshui">1    <form action="" method="post">2         <p> 用户名:3             <input type="text" value="张三" size="20" name="userName" />4         </p>5     </form></pre>    </p>    <p>     b.密码框(password)</p>    <p class="sycode">     <pre class="precsshui">1 密码:<input type="password"  name="pass" /></pre>    </p>    <p>     c.重置\提交与普通按钮</p>    <p class="sycode">     <pre class="precsshui">1         <input type="submit" value="提交按钮" name="submit" />2         <input type="reset" value="重置按钮" name="reset" />3         <input type="button" value="普通按钮" name="button" />4         <!--图形提交按钮-->5         <input type="image" src=" " /></pre>    </p>    <p>     d.单选按钮(radio)</p>    <p class="sycode">     <pre class="precsshui">1         <input type="radio" name="gen" class="input" value="男"/>男2         <input type="radio" name="gen" class="input" value="女"/>女</pre>    </p>    <p>     e.复选框(checkbox)</p><div class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/ai/1800" title="Elser AI Comics"><img
										src="https://img.php.cn/upload/ai_manual/000/000/000/175680368841628.png" alt="Elser AI Comics"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/ai/1800" title="Elser AI Comics">Elser AI Comics</a>
									<p>一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏</p>
								</div>
								<a href="/ai/1800" title="Elser AI Comics" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div>    <p class="sycode">     <pre class="precsshui">1     <input type="checkbox" name="hobby1" value="1" />运动2     <input type="checkbox" name="hobby2" value="2" />聊天3     <input type="checkbox" name="hobby3" value="3" />玩游戏</pre>    </p>    <p>     f.文件域(file)</p>    <p class="sycode">     <pre class="precsshui">1     <input type="file" name="file" /></pre>    </p>    <p>    g.下拉列表框(select)</p>    <p class="sycode">     <pre class="precsshui">1     <!--name:指定列表  value:可选择的值-->2     向往月份：3     <select name="c"> 4         <option value="0" selected="selected">请选择</option>5         <option value="1" >1月</option>6         <option value="2">2月</option>7     </select></pre>    </p>    <p>     h.多行文本域(textarea)</p>    <p class="sycode">     <pre class="precsshui">1     <!--cols:指定多行文本域的列数   rows:指定多行文本域的行数-->2     <textarea name="textarea" cols="40" rows="6">初始文本内容    
         i.隐藏域(hidden)
         
1     2     
    
         j.只读和禁用属性
         只读:readonly="readonly"   禁用: disabled="disabled"
      7.结合表单做的简易求职表
         
      
 1  2  3 简单表单小结 4  5  6  7  8 申请表
 9 10 姓名： 
11 密码： 
12 照片：
13 感兴趣的职位：
14 Web设计15 Web开发 
16 喜欢的月份： 
28 协议：
29 老鼠爱大米------ 
30 我认真阅读并接受以上协议。
31 经验： 
37   38     39 
40 41 
42 43 
     
        三.表格的应用和布局
      1.表格的基本语法
         
1     
2         3             4         5         6             7         8     第一行第一个单元格的内容
第二行第一个单元格的内容

2.跨行跨列

 1      6      7          8              9             10         11         12             13             14         15     合并第一列的一行和二行 合并第一行的二列和三列
第二行第一个单元格的内容 第二行第二个

3.表格的高级标签

a.表格标题:

b.表格表头:

c.表格数据的分组标签:页眉

数据主体页脚