星云code
星云code

【JavaWeb】day01-HTML&CSS

day01-HTML&CSS

HTML

  • 图片标签：

    • src：指定图像URL（绝对路径/相对路径）
    • width：图像宽度（像素/相对于父元素的百分比）
    • height：图像高度（像素/相对于父元素的百分比）

  • 标题标签：

    -

  • 水平线标签：

<body>
      
    <img src="img/news_logo.png"> 新浪政务 > 正文
    
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>
    
body>

【JavaWeb】day01-HTML&CSS_第1张图片

<a href="http://gov.sina.com.cn/" target="_self">新浪政务a>

<style>
    a:hover {
        color: #FF6600; 
        /* 鼠标悬停时改变颜色 */
    }

    a {
        color: black;
        text-decoration: none;
        /* 去除下划线 */
    }
style>

  • 视频标签：

    • src：规定视频url
    • controls：显示播放控件
    • width：播放器宽度
    • height：播放器高度

  • 音频标签：

    • src：规定音频url
    • controls：显示播放控件

  • 段落标签：

  • 文本加粗标签：/


<video src="video/1.mp4" controls width="950px">video>

<audio src="audio/1.mp3" controls>audio>
<style>
    p {
        text-indent: 2em;
        /* 设置段落首行缩进两个字符 */
        line-height: 40px;
        /* 设置行高为40px */
    }
style>
  • 表格标签

【JavaWeb】day01-HTML&CSS_第2张图片

<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号th>
            <th>品牌Logoth>
            <th>品牌名称th>
            <th>企业名称th>
        tr>
        <tr>
            <td>1td>
            <td> <img src="img/huawei.jpg" width="100px"> td>
            <td>华为td>
            <td>华为技术有限公司td>
        tr>
        <tr>
            <td>2td>
            <td> <img src="img/alibaba.jpg"  width="100px"> td>
            <td>阿里td>
            <td>阿里巴巴集团控股有限公司td>
        tr>
    table>

body>

【JavaWeb】day01-HTML&CSS_第3张图片

  • 表单标签

    • ：定义表单项，通过type属性控制输入形式