html简单入门

2018-07-28 本文已影响0人 lovinglili

结构：

 <DOCTYPE html>
  <html>
          <head><!--头部里面的内容不显示-->
             <meta charset="utf-8">
              <title>内容</title><!--可以显示-->
               <style type="text/css">
                      css样式
               </style>
          </head>
          <body>
                    内容部分
          </body>
  </html>

charset="utf-8"代表html使用的字符编码Unicode 字符。
meta:原信息，对某些事物的描述。

基本标签

注释：格式：

<!--内容-->

标题：h1~h6;

格式：<hn>标题内容</hn>
h1定义级别最高的标题，h6定义级别最低的标题。字体大小依次减弱，粗细不变。

段落：p

格式:内容 能够使文本独占一行

span标签

格式：文字
就相当于一个装文字的容器，使用标签时,若格式如下：

    <span>sfdsdffsfsdf</span>
    <span>sfdad</afasdaf>

两段文字出现在一行，且中间会有一个小空隙，这是由于换行符引起的。行内元素基本都有这个特性。

div:万能容器

超链接：a

格式：<a href="连接地址" target="跳转方式" >abc</a>
默认状态下，abc带有下划线并且是蓝色的，点击abc可以跳转到链接地址指向的地方；
常用的跳转方式：_self（本身所在界面打开）,_blank（新的界面打开）；

图像：img

格式:<img src=''图像链接地址'' alt="图像加载失败时显示的内容" title="鼠标划过图片显示的内容" border=" 图像边框数值" width=" 图像的宽" height="高度数值" />
以上数值可以先使用px（像素）做单位，对于字体来说，可作为数值单位还有em rem；

斜体：i/em

格式：ddgf sfsdfds

粗体：b/strong

格式：fsdf sfdfsd

换行:br

格式:

水平线：hr

格式：

表格：table

格式：

 <table>
      <tr>
          <th>标题</th>
      </tr>
     <tr>
          <td>内容</td>
      </tr>
  </table>

tr定义行，th定义表头，td定义表格单元；
table内常用属性：align="left/right/center"整个表格的对齐方式，cellspacing="数值"单元格间的填充，cellpadding="数值"单元格内的填充，bordercolor="颜色"设置边框的颜色，bgcolor="数值"表格背景色；
例如：<table align="left" bgcolor="red"></table>

合并单元格的属性在td里面填写,例如：

 <table>
      <tr>
          <th>标题</th>
          <th>标题</th>
          <th>标题</th>
          <th>标题</th>
      </tr>
       <tr >
          <td colspan="2" rowspan="2">内容</td>
            <td>内容</td>
            <td>内容</td>
      </tr>
      <tr >
            <td>内容</td>
            <td>内容</td>
      </tr>
  </table>

合并行（rowspan）合并l列（colspan）要删除被合并的单元格；

表单：form 向服务器提交信息

格式：

 <form action=" 数据提交的位置"  method="数据上传的方式：get/post">
      <!--get 方式提交的数据显示在地址栏，有大小限制-->
      <!--post方式提交的数据地址栏不可见，可用于敏感信息大小基本无限制-->
      <fieldset >
      <legend>Personal information:</legend>
          <input type="text" value=""><!--文本框-->
          <input type="password" value=""><!--密码框-->
          <input type=" button" value=""><!--按钮-->
           <legend>Personal information:</legend>
       </fieldset >
      <input type="radio" value="1" name=""><!--单选框,name值一样的为一组框-->
      <input type="checkbox" value="1" name=" li"><!--复选框,name值一样的为一组框-->
      <input type=" file" ><!--文件-->
      <input type="submit"><!--自动提交按钮-->
      <input type="reset"><!--清空-->
      <textarea cols=" 数值" rows="数值"><!--多行文本，属性值代表多少行多少列-->
      <select name=""><!--下拉框-->
                <option selected>下拉内容 </option><!--代表当前被选中-->
                <option>下拉内容</option>
      </select>
 </form>

fieldset用来组合表单元素，会自动生成一个线框，legend在生成的线框左上角显示；
单选框和复选框里面的value值代表移交给服务器的值；
按钮里面的value值显示在按钮上
文本框和密码框里面的value值是框内的默认值；
想要数据正确的被提交，每一个都要设置一个name值
下拉框里面的value值代表当前选中的值，option页面显示的值和value值没有关系

列表：有序，无序，自定义

常用属性：type;

有序：ol li

格式：

<ol type="none/1/a/A/i/I"><!--无样式，数字（默认），字母，罗马数字作为列表序列-->
    <li></li>
     <li></li>
</ol>

无序：ul li

格式：

<ul type="none/disc/circle/square"><!--无样式，实心圆，空心圆（默认），正方块作为列表序列-->
    <li></li>
     <li></li>
</ul>

自定义：dl dt dd

格式：

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

显示格式：标题
内容

常用转义字符：

    &nbsp; <!--空格-->
    &lt;<!--小于号-->
    &gt;<!--大于号-->
    &amp;<!--&-->
    &quot;<!--引用-->