寒假Web前端学习-html基础二

打卡,第二天学习,理论上应该把HTML基础学完了,明天开始学CSS,分享一下学习笔记。
中国大学MOOC上有很多学习视频,想了解的可以多看看。

html基础二
*超链接 a
<a href ="网址">文字或者图片</a>
链接到本站点其他网页
<a href ="new.html">新闻</a>
链接到其他站点
<a href ="http://www.baidu.com">百度</a>
虚拟超链接
<a href ="#">板块2</a>

*image 插入图象
<image src="w3school.gif" alt="w3c"/>
src属性:路径+文件名

绝对路径与相对路径
在index.html中引用图片logo.gif
绝对路径 以根目录为基准
        <img src="C:site/logo.gif">
相对路径 以该文件所在位置为基准
        <img src="logo.gif">

*区域 div
<div align="center">  //居中
    <h1>web 前端开发</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
</div>

*无序列表"《ul》"
    <h1>web 前端开发</h1>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

*有序列表 ol li
    有序列表“<ol>”列表项“<li>”

        <h1>web 前端开发</h1>
        <>
        <li >HTML </li>
         <li >CSS</li>
         <li >JS</li>
        </ol>

*表格 table     //tr 行   //td 列   //th 表头单元格
<table border="1">  //border 为边框宽度
    <tr>    <th>班级</th> <th>学生数</th> <th>平均成绩</th>   </tr>
    <tr>    <td>一班</td> <td>30</td>     <td>89</td>         </tr>
    <tr>    <td>二班</td> <td>35</td>     <td>85</td>         </tr>
    <tr>    <td>三班</td> <td>32</td>     <td>80</td>         </tr>

</table>


*表单与表单元素
<form>
        账户:<input type="text" value="" name="userName"/>   //name的值表示这个控件的名称
        <br/>                                                      //密码框 type="password"
        密码:<input type="password" value="" name="userPsd"/>  //文本框 type="text"
        <br/>
        爱好:
        <input type="text" value=""/>
        <input type="submit" value="提交"/>    //提交 submit   重置 reset
        <input type="reset" value="重置"/>     //value 按钮上显示的文字
        <br/>
        性别:
    男    <input type="radio" value="boy"  name="gender"  checked="checked"/>  //type=radio 单选框
    女    <input type="radio" value="girl"  name="gender" />                    //checked="checked"该选项被默认选中
    <br />
    爱好:
    <input type="checkbox" value="1"  name="music" checked="checked"/>音乐    //type=checkbox 复选框
    <input type="checkbox" value="2"  name="sport" />体育
    <input type="checkbox" value="3"  name="reading" />阅读
        <br/>
    爱好:
    <select>       //下拉列表框
        <option>看书</option>
        <option selected="selected">旅游</option>  //selected="selected" 默认选择
        <option>运动</option>
        <option>购物</option>
    </select>
        <br/>
        个人简介<br/>
    <textarea rows="10" cols="50">         //文本域   rows 行数  cols 列数
        在这里输入内容......
    </textarea>
        <br/>
        <input type="submit" value="确定"/>
        <input type="reset" value="重置"/>

    </form>

*web 语义化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <p>
        <em>强调</em>  <br />
        <i>斜体,无语义</i>
    </p>
    <p>
        <strong>重点强调</strong>  <br />
        <b>粗体,无语义</b>
    </p>
</body>
</html>





发布了10 篇原创文章 · 获赞 0 · 访问量 329

猜你喜欢

转载自blog.csdn.net/want_to_fly_/article/details/103955660
今日推荐