HTML——小知识

【前言】

1.（Hyper Text Markup Language） 超文本标记语言

2.不是一种编程语言，是标记语言

3.标记就是一套规定好的标记标签，不能随意添加修改

【结构】

【标签】

1.标题标签：<h1> …<hn>,字体逐渐缩小

2.段落标签:<p>…</p>

3.水平线标签::<hr>

4.换行标签:<br>

5.块状标签:<div>...</div> 一行只可放一个元素

6.流状标签:<span>...</span> 一行可放多个元素

7.图像标签:<img src="图像路径">

【举例】

【格式化】

1.斜体字: i--em

2.下划线: u--ins

3.删除线: s--del

4.黑体字: b--strong

【举例】

【超级链接】

<body>
<a href="one.html">链接名</a>
</body>

若想要去掉超链接下划线：text-decoration：none
鼠标触及超链接，文字变为不同颜色：hover、active、visited

【文字】

1.字体大小: font-size

2.字体样式: font-style

3.字体粗细: font-weight

4.字体颜色: font-color

<body>
    <a href="" style="font-size:100px;color: red">字体</a>
</body>

【表格】

1.由<table>标签定义

2.行: <tr>

3.单元格: <td>

4.框线： border

5.标题：<caption>...</caption>

<body>
    <table border="1"  style="width:200px;height: 100px">
    <caption>标题<caption>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</body>

最后呈现出来的效果就是这样的啦！

【合并单元格】

1.跨列： <td colspan="2">...</td> 横向合并

2.跨行： <td rowspan="3">...</td> 纵向合并

<body>
    <table border="1"  style="width:200px;height: 100px">
    <caption>标题<caption>
    <tr>
        <th rowspan="3"></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</body>

【列表标签】

1.无序列表: <ul> <ul type="disc(默认) circle(句号) square(方块)">

2.有序列表: <ol> <ol type="1(默认数字) a(小写字母列表) A(字母列表) i(小写罗马字母列表) I(罗马字母列表)">

<body>
    <ul type="disc">
        <li>仙女</li>
        <li>仙女</li>
        <li>仙女</li>
    </ul>

    <ol type="1">
        <li>仙女</li>
        <li>仙女</li>
        <li>仙女</li>
    </ol>
</body>

浏览器显示如下：

【表单标签】

1.表单用于搜集不同类型的用户输入。

<body>
文本框:<input type="text"value=""><br>
用户名：<input type="text"placeholder="输入用户名"><br>
文本框<input type="text"maxlength="3"><br>            /*maxlength最多可以输入多少个字符*/
文本框<input type="text"maxlength="3"style="Width:50px"><br>   /*设置文本框边长大小*/
密码框<input type="password"placeholder="输入密码"><br>
单选框:<input  type="radio"name="gender">男   /*gender只放一个为双选,两个为单选,加在后面*/
        <inputtype="radio"name="gender" checked>女<br>     /*checked默认选中*/
复选框:<input type="checkbox">登山     /*checkbox可多选*/
       <input type="checkbox">游泳
       <input type="checkbox">旅游<br>
下拉框：<select>
        <option>aa</option>
列表框：<selectsize="3">            
        <option>aa</option>
列表框：<selectsize="10"multiple>    /*multiple可以拖动*/
        <option>aa</option>
        <option>bb</option>
        <option>cc</option>
        <option>aa</option>
        <option>bb</option>
        <option>cc</option>
        </select><br>
普通按钮：<inputtype="button"value="默认"><br>
<!--把表单中的数据发送到服务器-->
提交按钮：<inputtype="submit"value="保存"><br>
          <button>登录</button><br>
文本域：<textareacols="10"rows="10">初始值</textarea><br>       /*没有value值*/
</body>

邓邓邓邓邓-

发布了25 篇原创文章 · 获赞 2 · 访问量 2293

私信关注

猜你喜欢