1. 标题h

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

2. 段落p

<p>这是一个段落哦</p>
<p>这是另一个段落</p>

3. 超链接a

<a href="http://www.hao123.com">点我在当前页面打开</a>
<a href="http://www.baidu.com" target="_blank">点我在新窗口中打开</a>

4. 插入图片img

<img src="whphp.jpg" width="104" height="142" alt="下载失败时的替换文本" title="提示文本"/>

5. 表格table

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td colspan="2">合并单元格</td>
    </tr>
</table>


标签
<tr><td>一行中有几列
<th>表头(有居中和加粗效果)
<caption>标题说明(可以相对于table居中)


属性
cellpadding :内边距
cellspacing :外边距
border:边框宽度
align:对齐方式
cospan:合并列
rowspan:合并行

6. 列表

无序列表ul > li

<ul>
    <li>首页</li>
    <li>新闻</li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

有序列表ol > li

<ol>
    <li>首页</li>
    <li>新闻</li>
    <li>关于我们</li>
    <li>联系我们</li>
</ol>

自定义列表dl > dt

<dl>
    <dt>首页</dt>
    <dt>新闻</dt>
    <dt>关于我们</dt>
    <dt>联系我们</dt>
</dl>

7. 表单form


表单:是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

<form action="服务器文件" method="传输方式">
    用户名(文本框):<input type="text" name="username" placeholder="请输入..."/>
    <br />
    密码(密码框):<input type="password" name="password" />
    <br />

    性别(单选按钮):
    <input type="radio" name="sex" value="男" /><input type="radio" name="sex" value="女" /> 女

      注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
    <br />

    爱好(复选框):
    <input type="checkbox" name="music[]" "checked"/>音乐
    <input type="checkbox" name="music[]" />艺术
    <input type="checkbox" name="music[]" />电脑
    <br />

    国籍(下拉列表):
    <select name="country">
        <option value="中国">中国</option>
        <option value="美国" "selected">美国</option>
        <option value="澳大利亚">澳大利亚</option>
        <option value="加拿大">加拿大</option>
    </select>
    <br />

    个性签名(文本域):
    <br />
    <textarea name="sign" rows="行数" cols="列数" ></textarea>

    <input type="submit" value="提交按钮" />
    <input type="reset" value="重置按钮" />
</form>

<label> 标签的作用
把自己与其他标签"绑定"起来,也可以说是与其他元素关联到一起。

<label>与其他元素关联的方式有两种

1、显式联系:显式联系通过<label>的 "for" 属性和目标标签的 ID 来完成

<form>

            <input type="radio"  id="yes">确定

            <input type="radio"  id="no"> 取消

</form> 

<br>

<label for="yes">点击这里也可选择 确定 选项</label>

<br>

<label for="no">点击这里也可以选择 取消 选项</label>


2、隐式联系:隐式联系可通过标签嵌套完成

不嵌套<label>标签时,鼠标放在字上变为了 "工" 形,是不可以点击的

嵌套到<label>标签中时,鼠标移动到字上时,是可点击的。

<form>

     <label><input type="radio" >确定</label>

     <label><input type="radio" >取消</label>

</form>



8. 其他标签

<br />  换行
<hr />  分割线
<pre></pre>     预格式文本

9. 块级元素与行内元素

块级元素自己单独一行,不能和其他元素在同一行.

行内元素可以和其他行内元素,同在一行.

<div></div>     定义一个div块(块级元素)
<span></span>   定义一个span文本容器(行内元素)

其他默认块级元素

<h1>, <p>, <ul>, <table>

其他默认行内元素

<b>, <td>, <a>, <img>

以上为 html 的基础知识,是网站制作的必备课程,所有知识要求全部掌握精通!

已添加到喜欢了